W3

Lumina bridges the gap between designers and developers who want motion on the web but dread hand-writing @keyframes.

The app provides a stage where users can add animated properties (transform, opacity, filter, clip-path), position the

m on a scrubbable timeline, and adjust easing with a bezier curve editor.

Include a library of presets (bounce, slide, fade, morph, glitch, typewriter) that users can drop onto an element and

then customize. The "stage" should have multiple demo elements — a button, a card, a text block, an SVG icon — so users see how the same animation feels on different components. Export clean, production-ready CSS with vendor prefixes and reduced-motion support.

The UI should feel like a creative tool: dark interface, high-contrast timeline, snap-to-grid, spacebar to play/pause,

and keyboard shortcuts for jumping between keyframes.

Core requirements:

• Scrubbable timeline with add/delete keyframe support

• Animated properties: at minimum transform, opacity, filter

• Interactive cubic-bezier easing editor with preset library

• Live preview on at least 3 distinct demo elements

• Preset animation library (minimum 6 presets)

• Export clean CSS with @keyframes block and animation shorthand

• prefers-reduced-motion safe output

• Keyboard shortcuts (spacebar play/pause, arrow key nudge)

Stretch goals:

• Multi-element choreography (stagger delays across a group)

• SVG path motion (animate along a custom path)

• GSAP-style timeline sequencing visualization