Shader Effects for Websites: Prompts and Examples

No prompt shared by the author

No prompt shared by the author

You are Opus 5.5, the strongest model in the world right now. Use your imagination and every ability you have to do one thing that makes everyone who sees the result, whether an AI expert, a humanities student who knows nothing about tech, or a child, marvel: Opus, you are amazing. What will you make?

Make me the best water simulation you can

No prompt shared by the author

No prompt shared by the author

a planet from orbit, terrain, oceans, drifting clouds, day/night terminator with city lights, atmosphere at the limb, slow rotation, drag to tilt, a "Season" button that shifts the ice caps.

Build me a fully playable table tennis game using threejs r184 and webgpu no webgl fallback. Designed for high end mac M4 M5 chips only. Cutting edge browser technoclogy. Game must be visually stunning. At least as good as a playstation 4 game. Build the whole game out. This is a showcase for claude code and fable. 1 player vs cpu. Game physics and mechanics must be solid. Absolutely stunning visuals.

Create a polished, visually impressive, self-contained single-file HTML/WebGL experience called: totality-engine.html put it in documents/llm-benchmarks Do not just describe the idea. Actually generate the complete working HTML file and save it to the current directory. Build a 32-second looping cinematic short, not a sandbox diorama. The product is the camera performance. Interaction is a bonus after the film has played once. World: A drowned gothic cathedral at solar-eclipse totality. Black water covers the nave floor. Filling the crossing is a monumental brass astronomical clock, the Totality Engine: nested orrery rings, glass planets, a black-sun core, and a 40-meter dark-marble pendulum with gold fittings. Wet limestone, verdigris, candle flames, and gold dust. Everything is procedural code. No external models, textures, images, fonts as files, or audio. Directed film (one clock, named beats, seamless loop): 0.0–4.0s DUST Extreme close-up. One dust mote turns in a shaft of red-gold light. Almost no context. Slow push. 4.0–10.0s NAVE Pull back and rise. We are knee-deep in black water in the cathedral crossing. Rib vaults recede into fog. The pendulum enters frame from the left, heavy, slow, and passes close enough to feel its mass. Water rings spread from the camera. 10.0–18.0s ASCENT Ride the pendulum's upswing. Reveal the orrery in the vault: at least four nested brass rings at different inclinations, three glass planets with distinct atmospheres (one cloudy, one ringed, one storm-banded), and the black-sun core. Candle clusters along the triforium. Gold dust falls upward against gravity. 18.0–24.0s THREAD Camera threads the orrery. Pass through the glass of the ringed planet (refraction, not a transparency hack), ride its ring plane for a beat, exit toward the black sun. The pendulum's next swing warps the light around it like a weak gravitational lens. 24.0–30.0s TOTALITY Corona detonates into a ring of white-gold fire that becomes the outermost orrery wheel. One audible-feeling clock tick: every ring snaps into a perfect alignment, then the corona holds. Do not fade to white. Hold the silhouette of the whole machine against the fire-ring. 30.0–32.0s CODA Ease into a slow continuation that matches frame 0, so the loop is invisible. No smash cut. After the first full play, enable drag-to-orbit, scroll-wheel zoom, and a "Replay film" control. A Pause button always works. Optional: keys 1–5 jump to beat starts. Scene craft: - Strong foreground / midground / background. The pendulum occupies foreground in NAVE. Vaults and fog hold the depth. - At least two human-scale references (a drowned pew, a fallen spire, a row of candles) so the machine reads as enormous. - Water is a real material: reflections of the orrery, a faint fresnel, slow displacement, the rings from the pendulum and the camera. - Glass planets are thick glass, not glowing balls. You should see a distorted cathedral through at least one of them. - Brass has weight: dark in shadow, only the rims catching corona light. - Candle flames and gold dust are instanced. Dust is pulled upward only during ASCENT and TOTALITY. - Rib vaults, flying-buttress silhouettes, and a giant circular rose-window / eclipse aperture in the far wall, aligned with the black sun. - Limited palette, locked: wet limestone #8a8680, brass #c4a574, verdigris #2f6f66, eclipse crimson #6b1020, corona #ffe9c2, black water #05070c, gold dust #e6c27a. No cyan, no magenta, no neon, no rainbow, no purple-on-black "AI look". - Typography: one small title "TOTALITY ENGINE" and beat name, filmic, not a dashboard. Technical requirements: - Three.js from a stable CDN. All HTML, CSS, and JS in this one file. - Drive every animation from a single elapsed-time clock with named beat windows. No independent Math.random loops, no Date.now in shaders, no unseeded noise. Seeded RNG only, seed constant 0xA2E1. - Camera film uses smooth interpolation with ease-in-out on the big moves, a heavier ease on the pendulum (it has mass), and a long-tail settle into TOTALITY. Linear orbit as the primary camera is a fail. - Custom GLSL (ShaderMaterial or full-screen pass), not stock materials pretending: 1. Water (reflection + fresnel + slow displacement) 2. Black-sun corona (fire / plasma, not a sprite) 3. Pendulum lensing (light bends near the bob during THREAD) 4. Thick glass for at least one planet - InstancedMesh for dust, candles, and any repeated stone/brass cells. Do not spawn thousands of free Mesh objects. - Post-processing is allowed but cannot replace lighting. If you use bloom, it is a light touch on the corona and candles only. UnrealBloom over the whole scene is a fail. - Fog, wet reflections, and the eclipse aperture do the atmosphere. No cheap transparent cones as "god rays" unless they are actually driven by a shader. - Responsive, full browser window, handle resize, target 60fps on a 2023 laptop. If you have to choose, cut particle count before cutting the camera film. - Small unobtrusive UI: title, current beat, pause, replay. No FPS counter, no dat.gui, no debug helpers left on. - No TODO comments, pseudocode, placeholders, missing functions, or "this would be better with X". - On load, the film starts itself. A still frame behind a start button is a fail. Quality bar: This should look like a short film still, not a three.js example. If a screenshot at 26 seconds does not read as "cathedral-sized clock at the moment of eclipse," you are not done. Iterate on composition, materials, and camera before adding more objects.

Ask me for: the task the AI agent completes for the user (default: plan + book a 3-day Kyoto trip), the palette (default: warm-gray canvas #E6E3DE, pure black/white UI, the orb is the only colored thing — pearl iridescent blue → violet → peach), and a royalty-free song around 120 BPM (search Mixkit yourself, measure BPM with numpy, show me 3 candidates with preview links before downloading the full track). Use AskUserQuestion, max 4 questions per round, recommended option first. Dribbble-level UI concept motion for an AI chat agent tool. One white shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. The star is a GLSL "AI orb" (fluid, breathing, iridescent blob — like the ChatGPT / Siri voice orb) that lives OUTSIDE the shape as a continuity element and changes role through the film: idle hero → reacts to voice while listening → shrinks into the input bar as an avatar → swirls faster while thinking → avatar on the answer → blooms when the task completes → back to idle. A cursor drives every change with real clicks and drags. One clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills ~60–75% of the frame. The orb pulses subtly on every beat. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows or gradients on UI chrome (the orb is content, not chrome), mismatched icon strokes, dead time, anything that looks like a template. 120 BPM, 8 bars = 32 beats = 16s, something happens on every beat (beat n at (n-1)*0.5s): Bar 1: orb idle, cursor approaches | click orb → shape stretches into a "LISTENING" pill, orb moves to its left and wobbles with a syllable envelope | live transcript types "Plan 3 days in Kyoto" | "…under 1,500, the value rolls live | drag past the 1,248 "cheapest plan" Bar 6: slider → black swipe-to-confirm "Book trip · $1,248" | grab the knob, drag right | past the end → rubber band | release → snaps to the end, arrow becomes a spinner Bar 7: → toast "Trip booked" | chips "Flights ✓" "Ryokan ✓" pop in | orb blooms (color + scale) | toast collapses toward the orb Bar 8: shape fades, orb grows back to hero size | settles | breathes on the beat, cursor drifts out | back to idle (loop) 1. One self-contained HTML file, square 1440x1440, fonts and audio-free assets inlined as data URIs. Every style is computed from time inside a pure `seek(t)`: no CSS transitions, no timers, no state carried between frames, never create tracks inside seek. 2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change; to loop, take the LAST target as the start value and also add the spring tails of the previous two cycles (t + L, t + 2L) so position AND velocity match at the seam. Damping ratio ≥ 0.72. 3. Content layers have their own enter/exit windows: exit lands exactly on the beat, enter starts ~80ms later (opacity + ~12px screen blur + 0.965→1 scale), or text overlaps. 4. Drags are direct manipulation: while held, the value = start + (cursorX − cursorX at press); past a limit apply rubber(over, R) = R·(1 − e^(−over/R)); on release a free spring runs from the release position AND velocity to the snap target. Cursor waypoints are [departure time, x, y] on a spring; the final waypoint equals the first so the cursor's position and speed are continuous across the loop. 5. The orb: WebGL fragment shader drawn on an OFFSCREEN 640×640 canvas, then synchronously drawImage'd into a visible 2D canvas inside seek (screenshotting the WebGL canvas directly is unreliable headless). Time must be periodic: uniforms (cos, sin)(2π·k·t/L) with integer k (e.g. k=2 and k=5), never raw t. Silhouette radius = 0.74 + amp·noise(direction·1.4 + T) sampled on the unit direction vector (no center seam); surface = low-frequency domain-warped 3D noise on the sphere normal → large smooth color bands; 16% pearl white, a bright inner core, a small sharp specular (pow 70), a pale lilac fresnel rim; darker lower half for volume; soft elliptical shadow under the idle orb. Uniforms: amp (idle 0.08, + syllable envelope while listening, + a bit while thinking), think (stronger/faster warp), bloom (completion color burst). Keep ≤5 noise calls per pixel. 6. Audio: analyze the song with numpy (spectral-flux onset, phase-locked BPM, downbeat by kick + chroma change, per-bar RMS). Start on the downbeat of a full-energy 8-bar phrase so the audio loop lands on a phrase boundary. Large analysis windows estimate beats ~15–25ms early: re-measure the cut with a 256-sample window and shift the start until the median residual is < 2ms. Crossfade the last 60ms with the 60ms before the start. Synthesize UI sounds with numpy (click, send swoosh, grab/drop, tick, success, chime) and place each by its MEASURED PEAK on the event time; multi-note sounds keep the first note loudest. 7. Render with Playwright Chromium: 4 subframes per frame spread over half a frame (180° shutter, centered on the frame time), 16 parallel workers. After each seek, await two requestAnimationFrames before the screenshot; do NOT use screenshot(animations='disabled'). Because the scene uses WebGL, launch with --use-gl=angle --use-angle=swiftshader --enable-unsafe-swiftshader --disable-gpu-watchdog (the default SwiftShader-Vulkan path loses the WebGL context most of the time). Convert any RGBA screenshot to RGB. 8. Encode with ffmpeg: -reinit_filter 0, tmix=frames=4 then select every 4th frame, 60fps, libx264 -crf 10 -x264-params aq-mode=3, AAC 256k, -t exactly the duration. Verify which subframes tmix actually averages on your ffmpeg version before choosing the select offset. Also make a crf 20 share version and a 3× looped copy. 9. Before the full render: render one frame on each beat and one 0.3s after it, tile them into contact sheets, and fix anything off the grid, cramped, clipped, unreadable, or with the orb missing. Then spot-check transition frames at full resolution. 10. Verify and report: t=0 and t=L screenshots are pixel-identical; frame count = 960 and video/audio are exactly 16.000s; seam frame-diff is the same order as its neighbors; no RGBA subframes; beat offset of the final audio < 10ms; sample the idle frames to confirm the orb is present in every one. - smoothstep(e0, e1, x) with e0 > e1 is undefined in GLSL — SwiftShader returns 0 and the orb vanishes. Always write 1.0 - smoothstep(lo, hi, x). - A heavy shader on software GL triggers the GPU watchdog (CONTEXT_LOST_WEBGL): keep the canvas at 640² and the noise count low; listen for console context-loss messages in every test. - Never put will-change on anything the camera scales, or text renders blurry. - Followers (the orb, avatars) use a slightly slower spring than the shape so they never get clipped by its edge. - Layer order: anything with a background plate goes BEFORE the text/icons that sit on it. - Don't override a centering translate() with an animated transform — wrap it in a layer instead. - ffmpeg -shortest can drop the last frame; set -t explicitly. - Make the last frame identical to the first, cursor position and speed included, or the loop stutters. Ask me for the inputs, prototype the orb shader alone first (render t=0, t=4, t=8 and prove t=0 == t=16 pixel-for-pixel, with no context loss across 8 fresh page loads), then show me the state list on the 8-bar beat grid as a table and wait for my OK before writing the full scene.

Go create your wildest tech demo.

No prompt shared by the author

Create a polished, visually impressive, self-contained single-file HTML/WebGL experience called: fresnel-engine.html Do not just describe the idea. Actually generate the complete working HTML file and save it to the current directory. Build a 32-second looping cinematic short, not a sandbox diorama. The product is the camera performance. Interaction is a bonus after the film has played once. World: A first-order Fresnel lens in a lighthouse lantern room at the height of a North Atlantic gale. The optic is four meters across: concentric brass-framed honey-glass prism rings rotating on a mercury bath. One kerosene sun at the core. Storm glass on every pane, salt rime on the iron, a keeper's coat on a peg, an oil can on the gallery floor. Outside: black sea, one visible wave hitting the cage. The beam is a real volume of light, not a prop. Everything is procedural code. No external models, textures, images, fonts as files, or audio. Directed film (one clock, named beats, seamless loop): 0.0–4.0s DROP Extreme close-up. Rain on the outer storm pane. One drop turns, and the lamp is warped through it. Almost no context. Slow push. 4.0–11.0s ROOM Pull back and rise. We are inside the lantern room. The optic fills the cage. Prism rings tick past the camera, heavy, slow, close enough to read the brass fittings. Mercury in the bath makes a slow meniscus. Water runs down the panes. 11.0–18.0s THREAD Camera threads a prism ring. Pass through the honey glass of one panel (refraction and a little dispersion, not a transparency hack), ride the ring's curvature for a beat, exit toward the kerosene core. The next panel warps the room around it. 18.0–25.0s BEAM Exit into the beam itself. Travel down the shaft over black water. One wave hits the gallery and throws spray through the light. Caustics crawl across the iron floor in time with the rotation. 25.0–30.0s SWEEP The optic completes one revolution. The beam sweeps the horizon and holds. One lightning frame silhouettes the whole lens against the cage. Do not fade to white. Hold the machine as a dark glass engine inside the fire of its own beam. 30.0–32.0s CODA Ease into a slow continuation that matches frame 0, so the loop is invisible. No smash cut. The 32-second loop is exactly one revolution of the optic. At t=0 and t=32 the same prism is in the same place. That is a mechanical constraint, not a suggestion. After the first full play, enable drag-to-orbit, scroll-wheel zoom, and a "Replay film" control. A Pause button always works. Optional: keys 1–6 jump to beat starts. Optional: #t= seconds deep-link. Scene craft: - Strong foreground / midground / background. A prism panel occupies foreground in ROOM. The cage, the sea, and fog hold the depth. - At least two human-scale references (keeper's coat, oil can, gallery railing, a drowned matchbox) so the optic reads as enormous. - The lens is built from many concentric prism rings (InstancedMesh or equivalent). A sphere, icosahedron, or textured globe standing in for a Fresnel lens is a fail. - Honey glass is thick glass. You should see a distorted lantern room through at least one panel. - Brass has weight: dark in shadow, only the rims catching the beam. - Rain on glass is a shader, not a handful of sprite drops. Spray and salt rime are instanced. - Caustics on the iron floor are driven by the rotating optic, not a looping GIF-like texture. - Limited palette, locked: iron #2a2c2e, brass #b0894f, honey glass #c9a36a, kerosene #ffb347, storm #0b1016, foam #c5d0d4, salt rime #e8e4dc, beam #ffe6b0. No cyan, no magenta, no neon, no rainbow, no purple-on-black "AI look". - Typography: one small title "FRESNEL ENGINE" and beat name, filmic, not a dashboard. Technical requirements: - Three.js from a stable CDN. All HTML, CSS, and JS in this one file. - Drive every animation from a single elapsed-time clock with named beat windows. No independent Math.random loops, no Date.now in shaders, no unseeded noise. Seeded RNG only, seed constant 0xF1A5. - Camera film uses smooth interpolation with ease-in-out on the big moves, a heavier ease on the optic (it has mass), and a long-tail settle into SWEEP. Linear orbit as the primary camera is a fail. - Custom GLSL (ShaderMaterial or full-screen pass), not stock materials pretending: 1. Honey-glass prism (refraction + slight dispersion) 2. Volume beam (density along a shaft; a transparent cone mesh is a fail) 3. Rain on the storm pane 4. Moving caustics on the iron floor, driven by the optic's angle - InstancedMesh for prism segments, rain, salt, and any repeated iron/brass cells. Do not spawn thousands of free Mesh objects. - Post-processing is allowed but cannot replace lighting. If you use bloom, it is a light touch on the kerosene core and the beam only. UnrealBloom over the whole scene is a fail. - Fog, wet reflections, and the storm do the atmosphere. No cheap transparent cones as "god rays" unless they are actually driven by a shader. - Responsive, full browser window, handle resize, target 60fps on a 2023 laptop. If you have to choose, cut particle count before cutting the camera film. - Small unobtrusive UI: title, current beat, pause, replay. No FPS counter, no dat.gui, no debug helpers left on. - No TODO comments, pseudocode, placeholders, missing functions, or "this would be better with X". - On load, the film starts itself. A still frame behind a start button is a fail. Quality bar: This should look like a short film still, not a three.js example. If a screenshot at 26 seconds does not read as "a cathedral-sized glass engine turning in a storm," you are not done. Iterate on composition, materials, and camera before adding more objects.