Shaders / GLSL

Per-pixel GPU programs for procedural light, fluid and texture.

Varies · ★ 5.3k · 325 clips

Shaders / GLSL clips325

Filter in Explore
Frame from “An interactive camera lens lab” by @RyanSael0:32
An interactive camera lens labby @RyanSaelPromptThree.js
Frame from “Zero-direction demoscene intro (280 KB HTML)” by @JustinPerea0:43
Zero-direction demoscene intro (280 KB HTML)by @JustinPereaPromptShader
Frame from “1906 San Francisco Market Street in Blender” by @alexalbert__0:08
1906 San Francisco Market Street in Blenderby @alexalbert__PromptBlender
Frame from “Interactive Peach Blossom Spring 3D demo” by @dotey4:17
Interactive Peach Blossom Spring 3D demoby @doteyThree.js
Frame from “Mobile game reward animation template” by @op74180:18
Mobile game reward animation templateby @op7418PromptThree.js
Frame from “Word-seeded cosmic genesis animation” by @MiaAI_lab1:37
Word-seeded cosmic genesis animationby @MiaAI_labPromptShader
Frame from “Battle of Austerlitz as a 5-minute film” by @WinterArc21255:01
Battle of Austerlitz as a 5-minute filmby @WinterArc2125PromptShader
Frame from “Opus 5.5 creative showcase” by @AxtonLiu0:39
Opus 5.5 creative showcaseby @AxtonLiuPromptShader
Frame from “1990s demoscene demo synced to a tracker song” by @gandamu_ml6:22
1990s demoscene demo synced to a tracker songby @gandamu_mlPromptBlender
Frame from “An Interactive 3D Tour Inside a Data Center” by @RyanSael0:34
An Interactive 3D Tour Inside a Data Centerby @RyanSaelPromptThree.js
Frame from “Three.js retro first-person RPG game” by @literallydenis1:23
Three.js retro first-person RPG gameby @literallydenisThree.js
Frame from “Procedural ocean island simulation” by @dangreenheck3:47
Procedural ocean island simulationby @dangreenheckThree.js
Frame from “@manaimovie Tripo/Blender character” by @manaimovie0:04
@manaimovie Tripo/Blender characterby @manaimovieBlender
Frame from “3D Surreal World Exploration” by @LexnLin1:24
3D Surreal World Explorationby @LexnLinPromptShader
Frame from “Shinkansen 3D model demo” by @higgsfield_ai0:18
Shinkansen 3D model demoby @higgsfield_aiBlender
Frame from “严岛神社 Blender” by @Ayu_AI_09120:24
严岛神社 Blenderby @Ayu_AI_0912Blender
Frame from “Exoskeleton Redesign in Blender” by @higgsfield_ai0:28
Exoskeleton Redesign in Blenderby @higgsfield_aiBlender
Frame from “An Explorable Raptor 3 Rocket Engine” by @konstantinsaifo0:35
An Explorable Raptor 3 Rocket Engineby @konstantinsaifoPromptThree.js
Frame from “Sakura Crossing” by @gmi_cloud1:21
Sakura Crossingby @gmi_cloudThree.js
Frame from “AI animated windmill in Blender” by @higgsfield_ai0:21
AI animated windmill in Blenderby @higgsfield_aiBlender
Frame from “3D pelican riding bicycle demo” by @alin_zone0:53
3D pelican riding bicycle demoby @alin_zoneThree.js
Frame from “图纸转 Blender 动画” by @Ayu_AI_09120:15
图纸转 Blender 动画by @Ayu_AI_0912Blender
Frame from “The rise of Anthropic” by @VincentWei933:44
The rise of Anthropicby @VincentWei93PromptThree.js
Frame from “Glass and Gold-Leaf Mosaic” by @LCSlates1:20
Glass and Gold-Leaf Mosaicby @LCSlatesPromptShader

How people build with Shaders / GLSL

Works where the prompt, the code or the video is public. Videos load from the creator's own host when you press play.

Battle of Austerlitz as a 5-minute film

by WinterArc2125 · CC-BY-4.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Battle of Austerlitz as a 5-minute film — generated with claude-opus-5.5; public prompt, source, render.

Prompt
Create a 4–5 minute cinematic video about the Battle of Austerlitz (1805), built entirely in code.

Research the battle thoroughly and decide for yourself how to tell the story, structure the pacing, explain the strategy, and visualize the events. I want it to be historically accurate, dramatic, easy to understand, and visually exceptional.

Use the attached paintings as visual inspiration, not a strict style requirement. I love their scale, atmosphere, smoke, dramatic skies, cavalry, massed formations, landscape, and sense of chaos. Find a way to translate that feeling into code — but if you can invent a stronger visual language, do it.

Don't make it feel like a generic infographic or strategy game. It should feel like a cinematic historical film that happens to be rendered with code.

You have complete creative control. Surprise me.

Clearwater: real-time shallow water and interactive ripples

by Aurelien_Gz · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Clearwater: real-time shallow water and interactive ripples — generated with claude-opus-5.5; public prompt, source, render.

Prompt
claude opus 5.5 one shotted this incredible 3d water from a video reference.. almost 1:1

Ray-marched film of a pelican riding a bicycle

by AxtonLiu · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Ray-marched film of a pelican riding a bicycle — generated with claude-opus-5.5; public prompt, render.

Prompt
每次一个新的模型出来呢,大家都让它去画 “鹈鹕骑自行车” 来判断这个模型的空间能力,基本上都是用 HTML、SVG 来画动画。当我实在看得都有审美疲劳了,我希望你能画一个最复杂、最精细、最精美的 “鹈鹕骑自行车”的动画视频,你可以用任何的技术,不用着急,画一天都可以。

Word-seeded cosmic genesis animation

by MiaAI_lab · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Word-seeded cosmic genesis animation — generated with claude-opus-5.5; public prompt, render.

Prompt
Build me something when people see it, they will say "Wow". Must be immersive, when people see it, they will be stunned by what they see.

This can be a video, or anything else you can think of.

Be creative. Go wild. Dig deep.

No AI slop. Something unique, think outside of the box. Think big. Think amazing. Something no other model done before.

Be proud. Show your best. Don't disappoint.

3D Surreal World Exploration

by LexnLin · CC-BY-4.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

3D Surreal World Exploration — generated with claude-opus-5.5; public prompt, render.

Prompt
Create a cinematic browser-based 3D world that can be explored freely with a camera, focused on breathtaking landscapes and extraordinary original architecture. Fill the world with huge strange buildings, monumental structures, surreal ruins, cliffs, valleys, forests, water, and unusual ultra-detailed forms that feel mysterious and awe-inspiring. This is not a game and not combat-focused, the goal is pure exploration, atmosphere, composition, and visual discovery. Make the world feel epic, highly detailed, and completely original, with architecture that looks weird, ambitious, and unforgettable.
About Shaders / GLSLagents, rendering, runtime
With agents
LLMs write fragment shaders directly; shaders are embedded in Three.js/HyperFrames/Remotion compositions for frame-accurate rendering.
Render path
glslViewer can record frames headlessly; or render inside a frame-seeking framework and encode with FFmpeg.
Runtime
GLSL / WGSL on WebGL, WebGPU or native
Best for
abstract loops · backgrounds · transitions · fluid/particle effects · raymarched scenes

Worth knowing

  • Shadertoy shaders default to CC BY-NC-SA 3.0 unless stated — check before featuring (https://www.shadertoy.com/terms)
  • glslViewer (BSD-3, ~5.3k stars) renders shaders headlessly source ↗

For the Shaders / GLSL team

Featured on 24fps

This page is free and always will be. If it helps your users, drop the badge on your showcase or README.

<a href="https://24fps.dev/tools/shaders"><img src="https://24fps.dev/badge/shaders.svg" alt="Featured on 24fps" height="28"></a>