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
1. Research & Inputs
CRITICAL: If the user has NOT provided the following, you MUST ask for them before proceeding:
- Business Name/Type
- Desired Aesthetic (e.g., Luxury, Minimalist, Cyberpunk)
- Color Palette
*Action*: Study reference images or search for "luxury website design trends" to inform the "vibe".
2. Custom Rules (Apply to all prompts)
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.
3. Prompts & Templates
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 (Headline + CTA)
- Features (Craftsmanship/Details)
- Testimonials
- Final CTA
Typography: [Elegant/Bold/Modern]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].4. Implementation Details
- 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.
5. Final Polish
- Slow down animations if they feel frantic.
- Ensure type hierarchies are distinct (H1 vs H2 vs Body).
- Add "social proof" elements to the Testimonials section.