AISkills/flat-artist/remotion-design-styles/SKILL.md

name, description

name	description
remotion-design-styles	Visual art-direction reference for building FlatRender video templates with Remotion (2D) and Three.js/@remotion/three (3D). Use when starting a new template, picking an art style, designing color palettes, or designing objects/scenes. Covers flat, gradient/mesh, glassmorphism, neon, 3D/cinematic, paper-cut, isometric, luxury looks plus color theory, lighting, and material design.

Remotion design styles (2D + 3D)

Project location: services/remotion/. Shared helpers: src/lib/anim.ts (hexToRgba, mixHex, rand), src/lib/branding.ts (colorSchema + BRAND), src/lib/aspect.ts (useLayout), src/lib/three-kit.tsx (3D studio kit). Animate everything off useCurrentFrame() — never Math.random()/Date.now() (breaks determinism; use rand(i)), and in 3D never use R3F's useFrame (use useCurrentFrame).

Pick a style first, then build

Each template should commit to ONE art style — mixing reads as "basic". Catalog:

Style	Look	How (Remotion)	Best for
Flat / minimal	solid fills, generous whitespace, 1-2 accents	SVG shapes, simple springs	corporate, clean promos
Gradient / mesh	soft drifting color blobs	blurred radial-gradient divs animated by frame (see GradientPromo)	modern SaaS, backgrounds
Glassmorphism	frosted translucent cards	backdrop-filter: blur, rgba fills, thin borders	UI/app promos
Neon / glow	dark bg + luminous strokes	drop-shadow/textShadow glows, emissive in 3D	gaming, nightlife, tech
3D / cinematic	real depth, reflections, bokeh	@remotion/three + three-kit (lighting, MeshReflectorMaterial, bloom/DOF)	premium logo/product reveals
Paper-cut / layered	stacked shapes with soft shadows	layered SVG + offset box-shadows	storytelling, kids, greetings
Isometric	2.5D objects on a grid	SVG with skew/rotateX CSS, or true 3D ortho camera	explainer, product, city scenes
Luxury / gold	dark + metallic gold + serif	gold gradients, shine sweeps, slow easing	weddings, premium brands

2D vs 3D — choose deliberately

• 2D (SVG/CSS): fast to render, crisp text, full control, no WebGL. Use for flat/gradient/glass/neon/character scenes, anything text-heavy.
• 3D (@remotion/three): depth, real lighting/reflections, bokeh, camera moves. Use for premium logo/product/abstract reveals. Costs render time. Setup is already done: R3F v9 + Config.setChromiumOpenGlRenderer("angle"). Reuse three-kit.tsx (StudioEnv, StudioLights, StudioFloor, StudioEffects, Confetti3D). Keep crisp Persian text as a 2D <AbsoluteFill> overlay ON TOP of <ThreeCanvas> — don't render Persian text in 3D.

Color design

• Drive every colorable element from the colorSchema props (accent / secondary / background / text) so the studio can recolor it — see ../remotion-svg-colors/SKILL.md.
• Build depth with VALUE, not just hue: dark bg → mid elements → bright accents/highlights. Add glow (hexToRgba(accent, .6) shadows) and a vignette (inset 0 0 600px rgba(0,0,0,.6)).
• Gradients: 2-3 stops max; blend related hues (mixHex(a,b,.5)). Mesh look = several large blurred radial-gradient circles drifting on sin(frame/…).
• Contrast: text needs ≥ 4.5:1 over its backdrop — add a scrim/shadow when over busy/3D scenes.
• Default palettes per mood: tech = blue→violet on near-black; festive = warm gold/red/green on cream or turquoise; luxury = gold on charcoal; fresh = teal/green on light.

Object design

• 2D: compose from primitives — <circle>, <rect rx>, <path> (quadratic Q for organic curves). Reuse rand(i) for deterministic scatter (particles, confetti, petals). Add glow via SVG filter: drop-shadow.
• 3D: primitives + good material = premium. meshStandardMaterial with metalness 0.3-0.7, roughness 0.15-0.35, flatShading for faceted gems, emissive+emissiveIntensity for glow that bloom picks up (set toneMapped={false} on flames/glows). Light with 3-point + colored rims (StudioLights). Faceted icosahedron/octahedron/dodecahedron read as "gems"; RoundedBox for gifts/cards.

Motion = polish

Stagger entrances (don't reveal everything at once), use spring() for pops and interpolate(..., Easing.out(Easing.cubic)) for slides, add secondary motion (breathe, drift, twinkle), and a subtle continuous camera/scene sway in 3D. Hold the final frame ~1s for readability.

Quality checklist

• One coherent style; depth via value + glow + vignette.
• All colors come from props (recolorable).
• Staggered, eased motion with secondary detail.
• Renders deterministically (no random/date).
• Verify visually: render stills at 3-4 key frames and LOOK before shipping.

Related: ../remotion-character-design/SKILL.md, ../remotion-aspect-ratios/SKILL.md, ../remotion-template-composition/SKILL.md, ../remotion-svg-colors/SKILL.md.