MS-107 · Decorative primitives (Fog, Sparkle, Candle, Spotlight, Starfield)

[adityapat24]

Fog

• About 5597:15707 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-15707
• Testimonials 5597:16837 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-16837
• FAQ ribbon 5597:20877 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-20877

Sparkles

• Testimonials 5597:16837 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-16837
• Projects 5597:21587 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-21587
• FAQ 5597:20877 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-20877

Candles

• About 5597:15707 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-15707

Spotlight beams

• Values 5690:2639 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5690-2639
• Hero title state 5597:8846 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-8846
• FAQ 5597:20877 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-20877

Stars

• Hero (night state) 5597:5431 → https://www.figma.com/design/L7vH8bprzaimoVmHMgIx7P/-Design--Mainsite?node-id=5597-5431

Steps

1. <Fog variant="cornerTopLeft"|"cornerBottomRight"|"sideLeft"|"sideRight"|"ribbon" animate>: wave SVGs with the cream #f7dfbc → lavender → transparent gradient; optional slow drift (CSS, 12–20s).
2. <Sparkle size color twinkle delay> + <SparkleCluster> (the 3-star groups).
3. <Candle height flame animate>: indigo candlestick, cream candle, flame flicker and a pulsing glow.
4. <Spotlight angle length color origin fixture>: a translucent beam with soft edges, plus the optional black lamp head (hero bushes).
5. <Starfield density seed>: a deterministic seeded star field in one SVG, with density 0–1 (the hero fades it by progress).
6. Every component accepts className/style, forwards ref, and puts data-anim on the root. An animate={false} prop turns off all idle motion (SM uses it); reduced motion also turns it off.
7. /dev/decor demo page.

Acceptance criteria

• Each primitive matches its Figma source
• Idle animations only use transform/opacity
• animate={false} and reduced motion both give a fully static render
• Starfield renders the same on server and client (no hydration mismatch)