Choose a prompt or drag the ring
{"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let glow = fbm(p * 3.0 + vec2f(0.0, u.time * 0.12), 4);\n let band = smoothstep(0.16, 0.82, glow + p.y * 0.7);\n return vec4f(mix(vec3f(0.04, 0.66, 0.59) * 0.12, vec3f(0.42, 0.16, 0.82), band), 1.0);\n}\n","mp4":"/examples/aurora.mp4","poster":"/examples/aurora.png"} aurora {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.0625,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let q = rot2(u.time * 0.22) * p;\n let swirl = sin(12.0 * length(q) - atan2(q.y, q.x) * 4.0);\n return vec4f(mix(vec3f(0.96, 0.28, 0.10), vec3f(0.85, 0.65, 0.12), 0.5 + 0.5 * swirl), 1.0);\n}\n","mp4":"/examples/plasma.mp4","poster":"/examples/plasma.png"} plasma {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.125,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let x = p.x + 0.72;\n let line = abs(p.y - (0.17 * sin(x * 8.0 + u.time) + 0.10 * sin(x * 19.0)));\n let graph = 1.0 - smoothstep(0.012, 0.03, line);\n return vec4f(mix(vec3f(0.05, 0.33, 0.61) * 0.12, vec3f(0.08, 0.85, 0.59), graph), 1.0);\n}\n","mp4":"/examples/live-graph.mp4","poster":"/examples/live-graph.png"} live graph {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.1875,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let cell = floor((p + vec2f(u.time * 0.035, 0.0)) * 85.0);\n let star = step(0.992, hash2i(vec2i(cell)));\n let nebula = fbm(p * 3.0, 4);\n return vec4f(vec3f(0.35, 0.46, 0.98) * star + vec3f(0.63, 0.20, 0.86) * nebula * 0.34, 1.0);\n}\n","mp4":"/examples/starfield.mp4","poster":"/examples/starfield.png"} starfield {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.25,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let radius = length(p);\n let ring = 0.5 + 0.5 * cos(radius * 46.0 - u.time * 3.0);\n let chrome = smoothstep(0.7, 0.98, ring) * smoothstep(0.54, 0.05, radius);\n return vec4f(mix(vec3f(0.32, 0.42, 0.65) * 0.16, vec3f(0.75, 0.80, 0.90), chrome), 1.0);\n}\n","mp4":"/examples/rings.mp4","poster":"/examples/rings.png"} rings {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.3125,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let grid = min(abs(fract(p.x * 10.0) - 0.5), abs(fract(p.y * 10.0 + u.time * 0.3) - 0.5));\n let line = 1.0 - smoothstep(0.012, 0.032, grid);\n let sweep = smoothstep(0.18, 0.0, abs(p.x - sin(u.time) * 0.7));\n return vec4f(vec3f(0.15, 0.18, 0.72) * 0.14 + vec3f(0.06, 0.64, 0.85) * (line + sweep * 0.55), 1.0);\n}\n","mp4":"/examples/grid-sweep.mp4","poster":"/examples/grid-sweep.png"} grid sweep {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.375,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let q = p * 7.0;\n let hex = max(abs(q.x) * 0.866 + abs(q.y) * 0.5, abs(q.y));\n let tile = 1.0 - smoothstep(0.52, 0.62, fract(hex));\n let wave = 0.5 + 0.5 * sin((q.x + q.y - u.time * 2.0) * 2.0);\n return vec4f(mix(vec3f(0.08, 0.31, 0.42) * 0.18, vec3f(0.08, 0.78, 0.70), tile * wave), 1.0);\n}\n","mp4":"/examples/hex-tiles.mp4","poster":"/examples/hex-tiles.png"} hex tiles {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.4375,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let radius = length(p);\n let angle = atan2(p.y, p.x);\n let arc = step(angle, 1.46) * step(radius, 0.36) * step(0.29, radius);\n let tick = 1.0 - smoothstep(0.012, 0.026, abs(radius - 0.33));\n return vec4f(mix(vec3f(0.36, 0.43, 0.58) * 0.13, vec3f(0.88, 0.65, 0.25), max(arc, tick * 0.22)), 1.0);\n}\n","mp4":"/examples/progress-dial.mp4","poster":"/examples/progress-dial.png"} progress dial {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.5,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let one = sin((p.x * 2.0 + u.time) * 2.4) * sin((p.y * 3.0 - u.time) * 2.1);\n let two = sin((p.x * 3.1 - u.time) * 1.7 + p.y);\n let mesh = 0.5 + 0.25 * one + 0.25 * two;\n return vec4f(mix(vec3f(0.98, 0.28, 0.46), vec3f(0.72, 0.27, 0.88), mesh), 1.0);\n}\n","mp4":"/examples/gradient-mesh.mp4","poster":"/examples/gradient-mesh.png"} gradient mesh {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.5625,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let beam = smoothstep(0.12, 0.0, abs(p.x - sin(u.time * 0.8) * 0.72));\n let edge = smoothstep(0.62, 0.08, length(p));\n return vec4f(vec3f(0.24, 0.16, 0.49) * 0.08 + vec3f(0.92, 0.83, 0.48) * beam * edge, 1.0);\n}\n","mp4":"/examples/spotlight.mp4","poster":"/examples/spotlight.png"} spotlight {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.625,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n let clouds = fbm(p * 4.0 + vec2f(u.time * 0.04, 0.0), 5);\n let soft = smoothstep(0.43, 0.74, clouds);\n return vec4f(mix(vec3f(0.25, 0.38, 0.72) * 0.42, vec3f(0.46, 0.77, 0.98), soft), 1.0);\n}\n","mp4":"/examples/clouds.mp4","poster":"/examples/clouds.png"} clouds {"scene":{"format":1,"duration_s":2,"fps":30,"loop":true,"size":[320,180],"seed":0.6875,"params":{}},"wgsl":"\n@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {\n let p = centered(uv, u.aspect);\n var dots = 0.0;\n for (var i = 0; i \u003c 12; i++) {\n let angle = f32(i) * TAU / 12.0 + u.time * 1.2;\n let center = vec2f(cos(angle), sin(angle)) * 0.27;\n let point = 1.0 - smoothstep(0.026, 0.046, length(p - center));\n dots = max(dots, point * (0.35 + 0.65 * max(0.0, cos(angle - u.time * 3.0))));\n }\n return vec4f(mix(vec3f(0.12, 0.83, 0.91) * 0.14, vec3f(0.75, 0.36, 0.98), dots), 1.0);\n}\n","mp4":"/examples/dots-loader.mp4","poster":"/examples/dots-loader.png"} dots loader 
text2shaderEarly access