Questions tagged [animation]
Post a PromptPrompts focused on motion and micro-interactions.
20 prompts
47votes
3answers
5.3kviews
Reduced-motion-first system prompt so every animation ships with a safe fallback
We had animations scattered across the codebase and maybe half respected prefers-reduced-motion. Auditing after the fact is miserable. I wanted motion to be safe by construction, not by review. So I m
28votes
1answers
5.2kviews
GPU particle system in three.js: 100k points orbiting a strange attractor at 60fps
I wanted a big swirling particle cloud following a Lorenz/Thomas attractor. CPU-updating 100k positions per frame in JS was a slideshow. I knew I needed the integration to happen on the GPU but kept g
10votes
0answers
1.3kviews
Touch bottom-sheet micro-interaction that feels native without a JS animation lib
Building a PWA and the bottom sheet is the make-or-break interaction. The generated versions animated height (janky), had no drag affordance, and snapped instantly instead of easing, so it felt like a
33votes
1answers
3.3kviews
Scroll-driven reveal animations that don't nuke accessibility or jank the scroll
I wanted sections to fade and rise as they enter the viewport, but every prompt result either used a heavy IntersectionObserver soup or animated top/margin and made the scroll stutter on a mid-range p
22votes
2answers
3.2kviews
One-shot three.js hyperspace starfield that stays 60fps on a laptop trackpad
I wanted the classic warp-speed starfield but every naive attempt spawned 20k separate Mesh objects and my fans took off. The trick was forcing the model to reach for InstancedMesh (or a single Points
28votes
1answers
3.2kviews
Prompt for a Snake game that actually feels juicy, not just a grid crawler
Every AI-generated Snake I've seen is technically correct and completely lifeless: a square that jumps one cell per tick with zero feedback. I wanted the arcade-cabinet feeling in a single HTML file.
10votes
1answers
1.7kviews
Staggered list entrance where items cascade in without a JS timeline library
I wanted a list where items rise and fade in one after another, the classic stagger. My first prompts hardcoded animation-delay per child, which breaks the moment the list length changes, and used a l
21votes
2answers
2.7kviews
Animated SVG flow-field lines that stay crisp at any zoom, seeded and hand-tuned
I love flow fields but canvas ones get blurry when someone zooms the page or exports to print. I wanted the same look as pure SVG paths so it stays vector-crisp forever. My naive prompt drew thousands
8votes
1answers
2.0kviews
Gemini prompt for an animated gradient hero background that doesn't jank on scroll
I wanted a slow, living gradient behind a hero, the kind that feels expensive. My first attempts animated background-position on a huge gradient and it hitched badly on scroll and cooked laptop fans,
9votes
1answers
2.0kviews
Generative CSS gradient-mesh background that stays subtle behind text
For a poster-style hero I wanted a soft animated gradient mesh, but the usual prompt gives you a seizure-inducing rainbow that makes overlaid text unreadable. The animation also pinned the CPU because
11votes
1answers
2.0kviews
A reusable three.js ShaderMaterial boilerplate prompt: time, resolution, and mouse uniforms done right
I kept rewriting the same plumbing for every shader toy: pass uTime, uResolution, uMouse, handle DPR, update on resize. And I kept getting subtle bugs, like resolution not accounting for pixel ratio s
12votes
2answers
2.0kviews
Breakout prompt where the bricks shatter and the ball leaves a trail
I've built Breakout a hundred times and it's always the same flat rectangles blinking out of existence. This time I wanted the destruction to feel physical: bricks that crack, shatter into shards, and
20votes
1answers
1.9kviews
Getting GPT to write clean fbm noise in GLSL without the hash function collapsing to bands
Whenever I asked for a fragment shader with fractal brownian motion I got a hash based on sin(dot(p, vec2(12.9898,78.233))) 43758.5453. It looks fine at small scale then produces visible diagonal band
8votes
1answers
1.8kviews
Interactive scatter explorer with brushing and a linked detail table
I wanted an explorer where you drag-select a region of a scatterplot and a table below updates to just those points, with the selection surviving zoom. My first version reset the brush every time the
21votes
2answers
3.6kviews
CSS-only accordion that animates open using grid-template-rows 0fr to 1fr
The eternal problem: you can't transition height: auto, so every accordion prompt gives me either a JS height-measuring hack or a max-height guess that's either clipped or has a laggy delay when conte