vibecoding-animated-websites

Vibecoding Animated Websites

When to use this skill

When the user asks to "vibecode" or build an "animated website".
When the user wants a high-end, luxury, or purely aesthetic-driven web experience.
When the user references "Antigravity", "Google Whisk", or "Google Flow" in the context of web design.

Workflow

Step 1: Research & Mood Boarding
Ask for or specify the business, aesthetic, and specific colors if not provided.
Acquire reference images (screenshots of 3-5 high-end websites).
Step 2: Project Setup & Custom Rules
Initialize project with semantic HTML5, 8px grid, preferred-reduced-motion, and CSS variable colors.
Step 3: Initial Build
Execute the Initial Build Prompt with user's specific details.
Step 4: Hero Asset Creation
Generate "Starting State" image.
Generate "End State" image (same subject, chaotic/dynamic).
Step 5: Animation Generation
Create transition animation between states.
Step 6: Asset Conversion
Convert video to image sequence.
Step 7: Implementation
Implement scroll-controlled animation using image sequence.
Step 8: Refinement
Add Dark/Light mode toggle.
Polish features, testimonials, and typography.

Instructions

CRITICAL: If the user has NOT provided the following, you MUST ask for them before proceeding:

Action: Study reference images or search for "luxury website design trends" to inform the "vibe".

Apply these rules to all generation steps:

Semantic HTML5: Use <header> , <main> , <section> , <article> , <footer> .
8px Grid: All margins/paddings must be multiples of 8px (e.g., 16px , 32px , 64px ).
Accessibility:
@media (prefers-reduced-motion: reduce) must be respected.
Use high contrast for text.
Theming: Use CSS variables (--color-bg , --color-text , --color-accent ) for all colors.

Initial Build Prompt

Use this template for the first code generation:

Create a landing page for [Business Name]. [Aesthetic] aesthetic. Colors: [Specific Colors]. Rules: Semantic HTML, 8px grid, CSS vars. Sections:

Hero Image Generation (Google Whisk / Image Gen Tool)

State 1 (Static):

[Product/Object] wrapped/still, [Background Color] background, studio lighting, high definition, [Aesthetic] style.

State 2 (Dynamic):

[Product/Object] exploding/unwrapping/in-motion, particles flying, [Background Color] background, dramatic, chaotic, beautiful.

Animation Prompt (Google Flow / Video Gen Tool)

Smooth, cinematic transition showing [Product] changing from [State 1] to [State 2].

Image Sequence: Do not use large video files for scroll effects. Use a sequence of JPEGs loaded into a <canvas> or cycled via <img> src based on scroll position.
Dark/Light Mode:
Add a toggle button.
Use JS to toggle a dark-mode class on <body> .
Update CSS variables based on the class.

Source Transparency