Loading video...

Video Failed to Load

Go Home

A swinging robot ๐Ÿค– Pure #CSS. Live demo and full code on CodePen.IO:

amit_sheen's profile picture

Amit Sheen

5,922 subscribers

13,491 views โ€ข 2 years ago โ€ขvia X (Twitter)

#CSS
LIVE

Anya Rossiโ€ข Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

A fun CSS-only experimentation using modern features (anchor positioning, @โ€‹property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO
0:17

A fun CSS-only experimentation using modern features (anchor positioning, @โ€‹property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

CSS by T. Afif

12,160 views โ€ข 1 year ago

Tailwind CSS Tip โœจ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo โ†“ (21/30) follow for 9 more tips ๐Ÿ””
0:12

Tailwind CSS Tip โœจ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo โ†“ (21/30) follow for 9 more tips ๐Ÿ””

Surjith S M โœช

203,378 views โ€ข 3 years ago

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ยฏ\_(ใƒ„)_/ยฏ Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:14

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ยฏ\_(ใƒ„)_/ยฏ Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

16,008 views โ€ข 3 years ago

Draw GLSL flowers with your cursor! ๐ŸŒบ One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool
0:13

Draw GLSL flowers with your cursor! ๐ŸŒบ One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Ksenia Kondrashova

28,620 views โ€ข 3 years ago

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO
0:18

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

43,711 views โ€ข 1 year ago

๐ŸŽฎ New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet ๐Ÿ‘‡ 0% JavaScript - 100% CSS Magic! Have fun๐Ÿคฉ
0:17

๐ŸŽฎ New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet ๐Ÿ‘‡ 0% JavaScript - 100% CSS Magic! Have fun๐Ÿคฉ

CSS by T. Afif

13,762 views โ€ข 2 years ago

๐Ÿ’ก CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code โœ… Powered by Scroll driven animations โœ… Defined at the root level โœ… Typed using @โ€‹property โœ… You can easily use it within any formula CodePen.IO demo in the reply ๐Ÿ‘‡
0:11

๐Ÿ’ก CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code โœ… Powered by Scroll driven animations โœ… Defined at the root level โœ… Typed using @โ€‹property โœ… You can easily use it within any formula CodePen.IO demo in the reply ๐Ÿ‘‡

CSS by T. Afif

35,659 views โ€ข 2 years ago

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:16

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

59,771 views โ€ข 3 years ago

Rube Goldberg HTML form! Tbh I spent way too much time on this one haha. As fun as it is useless :) Live demo & source code: Hosted on CodePen.IO Made with #GSAP GSAP
0:19

Rube Goldberg HTML form! Tbh I spent way too much time on this one haha. As fun as it is useless :) Live demo & source code: Hosted on CodePen.IO Made with #GSAP GSAP

Ksenia Kondrashova

65,318 views โ€ข 2 years ago

If I had to choose one thing to do, it would be just coding WebGL flowers It's a GLSL shader, a full-screen plane, and 2 render targets to swap on each frame Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders
0:15

If I had to choose one thing to do, it would be just coding WebGL flowers It's a GLSL shader, a full-screen plane, and 2 render targets to swap on each frame Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders

Ksenia Kondrashova

51,837 views โ€ข 3 years ago

Tailwind CSS Tip โœจ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code ๐Ÿ‘‡ (8/30) follow for 22 more tips ๐Ÿ””
0:17

Tailwind CSS Tip โœจ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code ๐Ÿ‘‡ (8/30) follow for 22 more tips ๐Ÿ””

Surjith S M โœช

173,091 views โ€ข 3 years ago

Skewed infinite carousel w/ vignette effect โœจ Built entirely with Tailwind CSS โ€“ zero JavaScript required. Live demo & code ๐Ÿ‘‡
0:11

Skewed infinite carousel w/ vignette effect โœจ Built entirely with Tailwind CSS โ€“ zero JavaScript required. Live demo & code ๐Ÿ‘‡

Steven Tey

472,799 views โ€ข 2 years ago

Cards Hover Effect woth pure CSS and HTML ๐Ÿš€๐Ÿ”ฅ Code in the comments ๐Ÿง‘โ€๐Ÿ’ป
0:11

Cards Hover Effect woth pure CSS and HTML ๐Ÿš€๐Ÿ”ฅ Code in the comments ๐Ÿง‘โ€๐Ÿ’ป

David Mrรกz

149,593 views โ€ข 3 years ago

Animated checkboxes coded with pure CSS ๐Ÿš€ Code for free on the link in the comments ๐Ÿง‘โ€๐Ÿ’ป
0:10

Animated checkboxes coded with pure CSS ๐Ÿš€ Code for free on the link in the comments ๐Ÿง‘โ€๐Ÿ’ป

David Mrรกz

13,296 views โ€ข 6 months ago

It's October, my dudes! I've redone one of my fav old works. The updates: - transparent background - no extra libs so just <15kb of code - parameters that are easy to change without going through the shader Live demo & source code: Hosted on CodePen.IO
0:18

It's October, my dudes! I've redone one of my fav old works. The updates: - transparent background - no extra libs so just <15kb of code - parameters that are easy to change without going through the shader Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

99,480 views โ€ข 2 years ago

โšก๏ธ CSS ::highlight() + TreeWalker for dynamic text search: - No DOM manipulation - Pure CSS ::highlight() styling - Efficient TreeWalker traversal [Code Snippet ๐Ÿ‘‡]
0:18

โšก๏ธ CSS ::highlight() + TreeWalker for dynamic text search: - No DOM manipulation - Pure CSS ::highlight() styling - Efficient TreeWalker traversal [Code Snippet ๐Ÿ‘‡]

Bharat Kara

39,265 views โ€ข 1 year ago

Tailwind CSS Tip โœจ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code ๐Ÿ‘‡ (14/30) follow for 16 more tips ๐Ÿ””
0:11

Tailwind CSS Tip โœจ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code ๐Ÿ‘‡ (14/30) follow for 16 more tips ๐Ÿ””

Surjith S M โœช

140,240 views โ€ข 3 years ago

Shaq escorted out by his robot buddy ๐Ÿค–๐Ÿ˜… ๐ŸŒŸ #NBAAllStar is LIVE on TNT
0:19

Shaq escorted out by his robot buddy ๐Ÿค–๐Ÿ˜… ๐ŸŒŸ #NBAAllStar is LIVE on TNT

NBA

205,041 views โ€ข 1 year ago

3D Landing Page Template (Source Code - Free)! built with - Next.js - Tailwind CSS - Three.js - GSAP A lightweight, visually impactful 3D Demo + Source Code (Free) : 1st comment ๐Ÿ‘‡
0:12

3D Landing Page Template (Source Code - Free)! built with - Next.js - Tailwind CSS - Three.js - GSAP A lightweight, visually impactful 3D Demo + Source Code (Free) : 1st comment ๐Ÿ‘‡

Mohamed Djoudir

49,049 views โ€ข 7 months ago

Evaluating policies on a real robot can be painful. Can we use a world model to get a rough estimate of how good a policy is? Checkout "Evaluating Robot Policies in a World Model". Paper: Demo: Code:
0:10

Evaluating policies on a real robot can be painful. Can we use a world model to get a rough estimate of how good a policy is? Checkout "Evaluating Robot Policies in a World Model". Paper: Demo: Code:

Sherry Yang

36,692 views โ€ข 1 year ago