Loading video...

Video Failed to Load

Go Home

A soda-cans scroll animation using three.js with scroll animation. Completely built with Codex GPT 5.6 Sol Ultra in ~20mins. The textures are being generated by imagegen skill. Not polished version. This is crazy af Demo: Source:

fkadev's profile picture

fatih kadir akın

101,427 subscribers

12,902 views • 18 days ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

This is genuinely mind-blowing. This guy literally built a fully interactive 3D human anatomy app with Three.js using GPT-5.6 Sol 🤯 100% free and open-source. demo + repo in 🧵↓
0:31

This is genuinely mind-blowing. This guy literally built a fully interactive 3D human anatomy app with Three.js using GPT-5.6 Sol 🤯 100% free and open-source. demo + repo in 🧵↓

Charly Wargnier

12,953 views • 11 days ago

I tested my Blender character creation skill with Codex + GPT-5.6 Sol Ultra. The full prompt: “Create a Three.js game where the player explores different biomes. Create the character and animations with skill-blender-character.” Codex built the world, created the low-poly character in Blender, generated the outfit and integrated the animations into the game. One prompt, one custom skill, one playable prototype.
1:02

I tested my Blender character creation skill with Codex + GPT-5.6 Sol Ultra. The full prompt: “Create a Three.js game where the player explores different biomes. Create the character and animations with skill-blender-character.” Codex built the world, created the low-poly character in Blender, generated the outfit and integrated the animations into the game. One prompt, one custom skill, one playable prototype.

Givros

10,599 views • 1 month ago

Another WTF moment. Using Codex as a fully custom game engine With the newly discovered and *insane* img2threejs skill 1) GPT imageGen a 3D item you want 2) ask GPT 5.6 Sol to use img2threejs 3) my harness brings it into the game automatically Just watch how good this is
0:31

Another WTF moment. Using Codex as a fully custom game engine With the newly discovered and *insane* img2threejs skill 1) GPT imageGen a 3D item you want 2) ask GPT 5.6 Sol to use img2threejs 3) my harness brings it into the game automatically Just watch how good this is

Nicolas Zullo

267,097 views • 25 days ago

This is legit btw, I made this floating iPhone version in Codex with GPT-5.6-sol and Blender MCP with five prompts and 40 minutes Been using blender for a while, never got results as good as this
0:43

This is legit btw, I made this floating iPhone version in Codex with GPT-5.6-sol and Blender MCP with five prompts and 40 minutes Been using blender for a while, never got results as good as this

tonbi

110,651 views • 1 month ago

❤️‍🔥I replicated a $5K scroll animation using Lovable in under 10 minutes And no, this isn’t the lazy “AI video in the hero section” trick. That stuff lags stutters kills the vibe This is frame-by-frame scroll animation. Prompt below ↓
0:20

❤️‍🔥I replicated a $5K scroll animation using Lovable in under 10 minutes And no, this isn’t the lazy “AI video in the hero section” trick. That stuff lags stutters kills the vibe This is frame-by-frame scroll animation. Prompt below ↓

Viktor Oddy

97,512 views • 7 months ago

The character pipeline is moving forward: animations are now working. I lost some time because Codex occasionally switched GPT-5.6 Sol back to Light/Medium by default, and the difference in task execution was immediately noticeable. After switching back to GPT-5.6 Sol Ultra, progress was much smoother. Using animations from Mixamo, the character can now idle, walk, run and jump. Next: shoes, skin variations and different body types. Then I need to decide what this project should become: • A character generator website? • A reusable Codex skill? • An open-source GitHub repo? What would be the most useful?
0:55

The character pipeline is moving forward: animations are now working. I lost some time because Codex occasionally switched GPT-5.6 Sol back to Light/Medium by default, and the difference in task execution was immediately noticeable. After switching back to GPT-5.6 Sol Ultra, progress was much smoother. Using animations from Mixamo, the character can now idle, walk, run and jump. Next: shoes, skin variations and different body types. Then I need to decide what this project should become: • A character generator website? • A reusable Codex skill? • An open-source GitHub repo? What would be the most useful?

Givros

16,719 views • 1 month ago

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @​keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @​keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇
0:36

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @​keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @​keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,760 views • 2 years ago

Two frontier models. Two very different demos. (GPT-5.6 Sol and Claude Fable 5) GPT-5.6 Sol Ultra was pushed in a mathematical direction and generated a Minecraft-style clone in Lean. Yes, that Lean. Meanwhile, Claude Fable 5 took a game development route and built a Minecraft mod featuring a Dark Souls-inspired enemy with multiple attack patterns, combos, and combat logic. They're solving completely different problems, but both are great examples of how capable today's models have become. The pace of progress is remarkable.
0:49

Two frontier models. Two very different demos. (GPT-5.6 Sol and Claude Fable 5) GPT-5.6 Sol Ultra was pushed in a mathematical direction and generated a Minecraft-style clone in Lean. Yes, that Lean. Meanwhile, Claude Fable 5 took a game development route and built a Minecraft mod featuring a Dark Souls-inspired enemy with multiple attack patterns, combos, and combat logic. They're solving completely different problems, but both are great examples of how capable today's models have become. The pace of progress is remarkable.

FHILY👑

19,336 views • 1 month ago

So this game is real now, fully built with GPT-5.5. I told Codex to use the imagegen skill to generate a reference UI and sprites, and used the Build macOS Apps plugin to build the app for a native retro fantasy labyrinth game! Adjusted the UI in a few prompts and here we are!
0:22

So this game is real now, fully built with GPT-5.5. I told Codex to use the imagegen skill to generate a reference UI and sprites, and used the Build macOS Apps plugin to build the app for a native retro fantasy labyrinth game! Adjusted the UI in a few prompts and here we are!

Thomas Ricouard

145,259 views • 3 months ago

Fable 5 and GPT-5.6 built the same scroll-animated website from one skill in 32 minutes. Only one of them made it feel like a film. Same prompt. Boutique Japan travel brand, origami style. A subway pulls in, a paper house unfolds into a hotel, a bird takes flight as you scroll. Doing this by hand is brutal, so the skill handles everything automatically. Here is how it works: → One anchor image sets the visual style and every scene that follows inherits it automatically → Higgsfield generates the video straight from the terminal through the MCP connection, no manual exporting → FFmpeg rips every frame out of the generated video automatically → Each frame then gets mapped to a scroll position so your scrollbar literally becomes the playhead The verdict came down to transitions. GPT-5.6 built strong individual scenes with incredible detail inside each one, but then hard-cut between them with no connection. Fable 5 stitched everything together. Wires push out of the top of the frame while the next scene blurs in behind it, gains depth and locks into place seamlessly. Same skill, same prompts, 10 generations each from both models. GPT-5.6 built 4 scenes. Fable 5 built one continuous film. Credit: Chase AI
9:48

Fable 5 and GPT-5.6 built the same scroll-animated website from one skill in 32 minutes. Only one of them made it feel like a film. Same prompt. Boutique Japan travel brand, origami style. A subway pulls in, a paper house unfolds into a hotel, a bird takes flight as you scroll. Doing this by hand is brutal, so the skill handles everything automatically. Here is how it works: → One anchor image sets the visual style and every scene that follows inherits it automatically → Higgsfield generates the video straight from the terminal through the MCP connection, no manual exporting → FFmpeg rips every frame out of the generated video automatically → Each frame then gets mapped to a scroll position so your scrollbar literally becomes the playhead The verdict came down to transitions. GPT-5.6 built strong individual scenes with incredible detail inside each one, but then hard-cut between them with no connection. Fable 5 stitched everything together. Wires push out of the top of the frame while the next scene blurs in behind it, gains depth and locks into place seamlessly. Same skill, same prompts, 10 generations each from both models. GPT-5.6 built 4 scenes. Fable 5 built one continuous film. Credit: Chase AI

0xMarioNawfal

48,091 views • 1 month ago

CSS Tip! 📜 You can create scroll indicators with scroll-driven animations 📍 Reveal a shadow, mask the content, etc. .indicator--top { animation: reveal; animation-timeline: scroll(nearest); animation-range: 0 2rem; } @​keyframes reveal { 0% { scale: 1 0; }} The trick here is to hook into the scroll position of the nearest scroll container with .indicator { animation-timeline: scroll(nearest); } Your reveal animation is going to scale the indicator up from 0 on the y-axis @​keyframes reveal { 0% { scale: 1 0; }} The timeline is however much you want to scroll by before revealing the indicator. In this example, you're saying to reveal the indicator once the scroller has been scrolled by 2rem .indicator--top { animation-range: 0 2rem; } How do you make this work for the opposite indicator? Use animation direction and a range based on the end of the scroller .indicator--bottom { animation-range: calc(100% - var(--scroll-buffer)) 100%; animation-direction: reverse; } You can use this same concept for the different styles to reveal different indicators. The only one that's different is the mask. The mask one animates the mask size across three mask layers and uses a mask composite to exclude the pieces that don't need to be shown 🤙 As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇
1:11

CSS Tip! 📜 You can create scroll indicators with scroll-driven animations 📍 Reveal a shadow, mask the content, etc. .indicator--top { animation: reveal; animation-timeline: scroll(nearest); animation-range: 0 2rem; } @​keyframes reveal { 0% { scale: 1 0; }} The trick here is to hook into the scroll position of the nearest scroll container with .indicator { animation-timeline: scroll(nearest); } Your reveal animation is going to scale the indicator up from 0 on the y-axis @​keyframes reveal { 0% { scale: 1 0; }} The timeline is however much you want to scroll by before revealing the indicator. In this example, you're saying to reveal the indicator once the scroller has been scrolled by 2rem .indicator--top { animation-range: 0 2rem; } How do you make this work for the opposite indicator? Use animation direction and a range based on the end of the scroller .indicator--bottom { animation-range: calc(100% - var(--scroll-buffer)) 100%; animation-direction: reverse; } You can use this same concept for the different styles to reveal different indicators. The only one that's different is the mask. The mask one animates the mask size across three mask layers and uses a mask composite to exclude the pieces that don't need to be shown 🤙 As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

99,168 views • 2 years ago

wow... GPT 5.6 Sol Passed the Replit Benchmark. In one prompt 5.6 on Codex created a full Replit clone with DB, Sandboxes, and an agent that builds and edits full web apps. Only Fable and GPT 5.6 have passed this benchmark. 5.6 is much better at designing iOS apps than 5.5 as well.
0:57

wow... GPT 5.6 Sol Passed the Replit Benchmark. In one prompt 5.6 on Codex created a full Replit clone with DB, Sandboxes, and an agent that builds and edits full web apps. Only Fable and GPT 5.6 have passed this benchmark. 5.6 is much better at designing iOS apps than 5.5 as well.

Riley Brown

123,242 views • 1 month ago

Fable 5 and GPT-5.6 built the same scroll-animated website from 1 skill in 32 minutes and only 1 of them made it feel like a film. Same prompt: boutique Japan travel brand, origami style. A subway pulls in, a paper house unfolds into a hotel, a bird takes flight as you scroll. Doing this by hand is brutal multiple videos, matched starting frames, frames ripped out 1 by 1 and synced to scroll position. The skill does all of it: Generate 1 anchor image and approve it every scene inherits the style Turn it into video through the Higgs Field MCP (Seedance), straight from the terminal FFmpeg pulls every frame Each frame maps to scroll position, so your scrollbar becomes the playhead Setup is just connecting the MCP and loading the skill works in Claude Code and Codex. It interviews you first about scenes, budget and mobile, then shows the anchor image before burning a single credit on video. Budget reality: 6 scenes runs ~800 credits and is overkill, 4 scenes is the sweet spot, crop-safe mobile is the cheap path. The verdict came down to transitions. GPT-5.6 Soul built strong scenes with incredible detail inside each one then hard cuts between scene 1 and 2, and again between 2 and 3. Fable 5 stitched them together: wires push out of the top of frame while the next scene blurs in behind, gains depth and locks into place. Same skill, same prompts, 10 generations each. Credit to Peter Wang for the original Scroll World skill open source, now forked with budget tiers and mobile fixes. Soul built 4 scenes. Fable built 1 film.
9:48

Fable 5 and GPT-5.6 built the same scroll-animated website from 1 skill in 32 minutes and only 1 of them made it feel like a film. Same prompt: boutique Japan travel brand, origami style. A subway pulls in, a paper house unfolds into a hotel, a bird takes flight as you scroll. Doing this by hand is brutal multiple videos, matched starting frames, frames ripped out 1 by 1 and synced to scroll position. The skill does all of it: Generate 1 anchor image and approve it every scene inherits the style Turn it into video through the Higgs Field MCP (Seedance), straight from the terminal FFmpeg pulls every frame Each frame maps to scroll position, so your scrollbar becomes the playhead Setup is just connecting the MCP and loading the skill works in Claude Code and Codex. It interviews you first about scenes, budget and mobile, then shows the anchor image before burning a single credit on video. Budget reality: 6 scenes runs ~800 credits and is overkill, 4 scenes is the sweet spot, crop-safe mobile is the cheap path. The verdict came down to transitions. GPT-5.6 Soul built strong scenes with incredible detail inside each one then hard cuts between scene 1 and 2, and again between 2 and 3. Fable 5 stitched them together: wires push out of the top of frame while the next scene blurs in behind, gains depth and locks into place. Same skill, same prompts, 10 generations each. Credit to Peter Wang for the original Scroll World skill open source, now forked with budget tiers and mobile fixes. Soul built 4 scenes. Fable built 1 film.

Spike 1%

45,052 views • 1 month ago

using MOCAP for player animation in UE5 requires "Generating Root Motion" that can drive the actual player character's locomotion during a runtime cinematic thanks Greg Richardson for the help with this demo in UE 5.6 with a new MetaHuman
0:59

using MOCAP for player animation in UE5 requires "Generating Root Motion" that can drive the actual player character's locomotion during a runtime cinematic thanks Greg Richardson for the help with this demo in UE 5.6 with a new MetaHuman

Matt Workman

13,084 views • 1 year ago

I built a Three.js game director skill system for Codex & Claude Code to help agents create more polished playable browser games. It guides gameplay loops, graphics, HUD/UI, debugging, QA, and optional Tripo ElevenLabs Nano Banana 2 Lite 3D/image/audio assets with API keys. Open source, get the skills in this thread 👇
1:14

I built a Three.js game director skill system for Codex & Claude Code to help agents create more polished playable browser games. It guides gameplay loops, graphics, HUD/UI, debugging, QA, and optional Tripo ElevenLabs Nano Banana 2 Lite 3D/image/audio assets with API keys. Open source, get the skills in this thread 👇

Majid Manzarpour

144,639 views • 2 months ago

Someone vibe coded a fully interactive 3D human anatomy app using GPT-5.6 Sol and Codex, and it started from a single design image. GPT Image 2.0 generated the design. Every organ image was generated from it and converted to 3D models through Tripo AI. Codex took those models, a master prompt and the design image and built the first version. The models were nearly 150MB each and running at 16fps, so Codex optimized everything down to 2 to 5.5MB per model and reduced total assets from 900MB to 28.6MB while keeping the visual quality intact. Codex also generated the anatomical illustrations showing where each organ sits, and created the interactive hotspot markers explaining different parts of every organ. Live and fully open source.
0:43

Someone vibe coded a fully interactive 3D human anatomy app using GPT-5.6 Sol and Codex, and it started from a single design image. GPT Image 2.0 generated the design. Every organ image was generated from it and converted to 3D models through Tripo AI. Codex took those models, a master prompt and the design image and built the first version. The models were nearly 150MB each and running at 16fps, so Codex optimized everything down to 2 to 5.5MB per model and reduced total assets from 900MB to 28.6MB while keeping the visual quality intact. Codex also generated the anatomical illustrations showing where each organ sits, and created the interactive hotspot markers explaining different parts of every organ. Live and fully open source.

0xMarioNawfal

56,332 views • 14 days ago

A dynamic 3D particle system built with Three.js, styled with Tailwind CSS, and enhanced by custom GLSL shaders. Features interactive pattern transitions, camera controls, and animation toggles for an immersive visual experience. Source code link in the reply below. 👇🏼
0:31

A dynamic 3D particle system built with Three.js, styled with Tailwind CSS, and enhanced by custom GLSL shaders. Features interactive pattern transitions, camera controls, and animation toggles for an immersive visual experience. Source code link in the reply below. 👇🏼

Techartist

14,014 views • 1 year ago

I've built a new opensource Elemental Sandbox, VFX playground built with Three.js . it contains 6 fully custamizable abilities. Everything you see is generated: no textures, no sprite sheets, no baked meshes. hand-written GLSL, GPU-simulated instanced particles, World position resolved in the vertex shaders... Source code :
0:38

I've built a new opensource Elemental Sandbox, VFX playground built with Three.js . it contains 6 fully custamizable abilities. Everything you see is generated: no textures, no sprite sheets, no baked meshes. hand-written GLSL, GPU-simulated instanced particles, World position resolved in the vertex shaders... Source code :

Chiro Visuals

229,190 views • 7 days ago

Over the last month, I burned over $200k in tokens with gpt-5.6-sol. I built a lot. Instead of just reacting to the benchmarks, news, tweets, etc, I went a different route. This video is an overview of all the cool shit I built using the new model. Proper review coming soon™
26:08

Over the last month, I burned over $200k in tokens with gpt-5.6-sol. I built a lot. Instead of just reacting to the benchmarks, news, tweets, etc, I went a different route. This video is an overview of all the cool shit I built using the new model. Proper review coming soon™

Theo - t3.gg

253,033 views • 1 month ago

Apple's product pages have that scroll effect. The camera flies through a 3D world. Products float. Scenes transition. No cuts. One continuous flight driven by your scroll wheel. Here is what one costs to build in 2026. Big storytelling agencies (Noomo, WithLore, Utsubo): $15,000 to $100,000. Three to six months. A team of designers, 3D artists, and WebGL developers. Awwwards-tier flagship from a senior freelancer: $8,000 minimum. Three.js multi-scene site with GSAP scroll: $3,500 to $8,000. That is if you can find a Three.js specialist. They charge $75 to $150 an hour. There are fewer of them than there are brands that want the site. Now meet scroll-world. A free, open-source agent skill for Claude Code and Codex that generates the entire thing from a prompt. Describe your brand. Describe the scenes. "A coffee brand. Start outside the farm. Fly into the roasting facility. Pass through the packaging. Land in the cafe." It generates the isometric stills. It generates the camera flights. It generates the connector clips between scenes from the actual boundary frames of both neighbors, so every seam is pixel-identical. No flicker. No cut. One continuous flight. Then it wires the chain into a portable vanilla JS scroll engine that drops into plain HTML, Next.js, or Vue. One prompt. Hours. Not months. 6,096 stars on GitHub in 25 days. 724 forks. MIT license. Built by cyw, founder and CTO of Hermai AI, out of San Francisco. Here is what scroll-world does: - Interviews you on brand, scenes, art direction, and budget before spending a cent - Generates the isometric stills through GPT Image 2 - Generates the camera flights through Seedance on Monid - Renders a native 9:16 portrait chain for mobile, not a crop - Ships a vanilla JS scrub engine with blob-seek, lazy load, and seam crossfade - Installs into Claude Code as a plugin or Codex through the Vercel skills CLI - Framework-agnostic Here is what scroll-world costs to install: Zero. Forever. Generation burns credits. A 6-scene 1080p chain on Monid pay-per-clip lands around $27, printed before the run starts. Big storytelling agency: $15,000 to $100,000. scroll-world: $27. Awwwards WebGL flagship: $8,000. scroll-world: $27. Three.js contractor for a month: $12,000. scroll-world: this afternoon. Your brand. Your world. Your scroll. 100% Open Source. (Link in the comments)
0:59

Apple's product pages have that scroll effect. The camera flies through a 3D world. Products float. Scenes transition. No cuts. One continuous flight driven by your scroll wheel. Here is what one costs to build in 2026. Big storytelling agencies (Noomo, WithLore, Utsubo): $15,000 to $100,000. Three to six months. A team of designers, 3D artists, and WebGL developers. Awwwards-tier flagship from a senior freelancer: $8,000 minimum. Three.js multi-scene site with GSAP scroll: $3,500 to $8,000. That is if you can find a Three.js specialist. They charge $75 to $150 an hour. There are fewer of them than there are brands that want the site. Now meet scroll-world. A free, open-source agent skill for Claude Code and Codex that generates the entire thing from a prompt. Describe your brand. Describe the scenes. "A coffee brand. Start outside the farm. Fly into the roasting facility. Pass through the packaging. Land in the cafe." It generates the isometric stills. It generates the camera flights. It generates the connector clips between scenes from the actual boundary frames of both neighbors, so every seam is pixel-identical. No flicker. No cut. One continuous flight. Then it wires the chain into a portable vanilla JS scroll engine that drops into plain HTML, Next.js, or Vue. One prompt. Hours. Not months. 6,096 stars on GitHub in 25 days. 724 forks. MIT license. Built by cyw, founder and CTO of Hermai AI, out of San Francisco. Here is what scroll-world does: - Interviews you on brand, scenes, art direction, and budget before spending a cent - Generates the isometric stills through GPT Image 2 - Generates the camera flights through Seedance on Monid - Renders a native 9:16 portrait chain for mobile, not a crop - Ships a vanilla JS scrub engine with blob-seek, lazy load, and seam crossfade - Installs into Claude Code as a plugin or Codex through the Vercel skills CLI - Framework-agnostic Here is what scroll-world costs to install: Zero. Forever. Generation burns credits. A 6-scene 1080p chain on Monid pay-per-clip lands around $27, printed before the run starts. Big storytelling agency: $15,000 to $100,000. scroll-world: $27. Awwwards WebGL flagship: $8,000. scroll-world: $27. Three.js contractor for a month: $12,000. scroll-world: this afternoon. Your brand. Your world. Your scroll. 100% Open Source. (Link in the comments)

Nav Toor

350,949 views • 17 days ago