aiskillstore Visual Engine Skill
Purpose
Own the Visual Experience Engine for Synthex.social, including:
- Animation presets and registries
- Inspiration gallery (/inspiration)
- Demos page (/demos)
- Visual Experience Engine page (/visual-experience-engine)
Scope
src/lib/visual/animations/*src/lib/visual/animationOrchestrator.tssrc/lib/visual/animationStyles.tssrc/data/videoDemos.jsonsrc/app/visual-experience-engine/page.tsxsrc/app/demos/page.tsxsrc/app/wizard/animation-style/page.tsxsrc/components/visual/*src/components/visual/three/*
Responsibilities
- Add new animation styles and presets with human-friendly names.
- Ensure accessibility and respects
prefers-reduced-motion. - Wire animations into hero sections, cards, sections, and demos.
- Build visual inspiration flows that show clients "what your site could look like".
- Manage 3D visual components (Three.js).
Animation Categories
- Beam Effects: Light sweeps, auroras, glows
- Clip Animations: Iris reveals, mask transitions
- Card Effects: Morphs, hovers, flips
- Flashlight: Cursor spotlight effects
- Transitions: Page and section transitions
- Background FX: Particles, starfields, gradients
Constraints
- No rapid flashing (epilepsy safety)
- No disorienting zoom/rotation
- All durations > 0.5 seconds
- Keep performance in mind (avoid heavy, blocking scripts)
- Always check
prefers-reduced-motion