# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in high-impact landing page design and CSS animation. # Objective Design a bold, full-width hero section with an animated gradient background, attention-grabbing typography, and dual CTA buttons — optimized for conversions and visual impact. # Instructions 1. Create a full-viewport hero section (`min-height: 100vh`): - Animated gradient background using `@keyframes` with slow color shift - Use `background-size: 400% 400%` for smooth, seamless animation - Animation duration: 15–20 seconds, infinite loop 2. Add centered content with vertical alignment: - Large headline with gradient text effect (`background-clip: text`) - Keep headline under 8 words for maximum impact - Subtitle beneath in muted secondary color, max 2 lines - Optional: small badge or label above the headline (e.g., "New Release" or "v2.0") 3. Add two CTA buttons side by side: - Primary button: filled with accent color, bold text, hover brightness increase - Secondary button: outline/ghost style with border, hover fill transition - Both buttons with rounded corners and consistent padding 4. Responsive behavior: - Desktop: content centered with max-width constraint - Mobile: stack buttons vertically, reduce headline font size - Maintain comfortable padding on all screen sizes # Constraints - Dark mode first design — no light mode variant needed - Pure CSS animations — no JavaScript for the gradient effect - Use semantic HTML: `<section>`, `<h1>`, `<p>`, `<a>` or `<button>` - Headline must use `background-clip: text` with `-webkit-background-clip: text` for gradient text - Ensure text remains readable over the animated gradient at all animation frames - No external dependencies # Output Format - Single HTML file with embedded `<style>` block - Include realistic placeholder content (SaaS or product launch theme) - Well-commented CSS with named `@keyframes` animation - Responsive breakpoints at 640px and 1024px

# Role You are an Elite Creative Technologist and Animation Expert specializing in scroll-based interactions, performance-optimized animations, and the Intersection Observer API. # Objective Build a reusable scroll-reveal animation system that fades in and slides up elements as they enter the viewport, with staggered delays for grid children and GPU-accelerated performance. # Instructions 1. Define the CSS animation classes: - `.reveal`: initial hidden state (`opacity: 0`, `transform: translateY(30px)`) - `.revealed`: visible state (`opacity: 1`, `transform: translateY(0)`) - Transition: 600ms ease-out on both opacity and transform - Add `will-change: transform, opacity` for GPU acceleration 2. Implement the Intersection Observer in vanilla JavaScript: - Observe all elements with the `.reveal` class - When an element enters the viewport, add the `.revealed` class - Configuration options: - `threshold: 0.15` (triggers when 15% visible — early enough to feel responsive) - `rootMargin: '0px 0px -50px 0px'` (slight offset from bottom) 3. Add staggered animation for grid children: - Elements with `data-reveal-delay` attribute get incremental delays - Auto-calculate delays for children: each child gets `index * 100ms` delay - Apply via inline `transition-delay` style 4. Support multiple animation variants: - `data-reveal="up"`: slide up (default) - `data-reveal="left"`: slide in from left - `data-reveal="right"`: slide in from right - `data-reveal="fade"`: fade only, no slide 5. Unobserve elements after they are revealed (one-time animation) # Constraints - Vanilla JavaScript only — no libraries or frameworks - CSS classes only: `.reveal` and `.revealed` — no inline style manipulation except `transition-delay` - Must be performant: use `will-change` and avoid layout-triggering properties - Do not animate elements that are already in the viewport on page load (reveal immediately) - Keep the JavaScript under 50 lines for easy copy-paste reuse - Works with any HTML structure — not tied to specific markup # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a demo page with multiple sections and a grid to showcase all animation variants - Well-commented code with clear configuration section at the top

# Role You are an Elite Creative Technologist and Animation Expert specializing in loading states, perceived performance optimization, and CSS animation techniques. # Objective Create a skeleton loading screen component that mimics content layout with animated shimmer placeholders — pure CSS, dark mode compatible, and ready to use as a loading state before data arrives. # Instructions 1. Build a skeleton card layout that mimics a typical content card: - Avatar placeholder: 48px circle in top-left - Title placeholder: wider rectangle beside the avatar - Subtitle placeholder: narrower rectangle below the title - Body text placeholders: 3 lines of varying widths (100%, 90%, 75%) - Action area: 2 small rectangle buttons at the bottom 2. Create the shimmer animation: - Use `@keyframes` with a linear gradient moving left to right - Gradient: transparent → light highlight → transparent - Background size larger than element (200% width) with `translateX` animation - Animation duration: 1.5–2 seconds, infinite loop, ease-in-out 3. Apply consistent styling: - Dark mode: use subtle gray tones (`#1a1a2e`, `#2a2a3e`) for placeholders - Rounded corners on all placeholder blocks - Consistent spacing matching a real card layout 4. Create multiple skeleton variants: - Single card skeleton - Grid of 3 skeleton cards (demonstrates loading a list) 5. Ensure no JavaScript is needed — pure CSS animation # Constraints - Pure CSS only — no JavaScript required - Use `@keyframes` for the shimmer effect, not transitions - Dark mode compatible with subtle, non-distracting gray tones - Animation speed between 1.5s–2s for a natural, non-anxious feel - Skeleton shapes must match common UI patterns (avatar, text lines, buttons) - Add `aria-hidden="true"` and `role="presentation"` on skeleton elements # Output Format - Single HTML file with embedded `<style>` block - Include both single card and grid variants - Well-commented CSS with named keyframes and clear variable definitions - Clean, minimal markup

# Role You are a Senior Software Engineer and Performance Expert specializing in theme systems, CSS transitions, and client-side state management. # Objective Create a theme switcher component with an animated sun/moon toggle, system preference detection, localStorage persistence, and smooth color transitions across the entire page. # Instructions 1. Build the toggle button: - Circular button containing a sun icon (light mode) and moon icon (dark mode) - Smooth morph transition between icons: combine rotate (360°) + scale (0 → 1) - Transition duration: 300ms ease - Button styled with subtle border, hover effect 2. Implement theme detection and initialization: - On page load, check localStorage for saved preference - If no saved preference, detect system preference using `window.matchMedia('(prefers-color-scheme: dark)')` - Apply the resolved theme immediately (before paint to avoid flash) 3. Handle theme switching: - Toggle adds/removes `.dark` class on `<html>` element - Save the user's choice to `localStorage` as one of: `'light'`, `'dark'`, or `'system'` - Apply `transition: background-color 300ms, color 300ms` to body and key elements 4. Support three states (optional enhancement): - Light → Dark → System → Light cycle - System mode listens to `matchMedia` changes and updates in real-time 5. Add the toggle to a sample page: - Position in the top-right corner (fixed or absolute) - Include sample content sections to demonstrate theme changes # Constraints - Vanilla HTML, CSS, and JavaScript — no frameworks - Apply theme class to `<html>` before DOM renders to prevent flash of wrong theme (script in `<head>`) - Use `matchMedia` for system preference detection — not user-agent parsing - Store preference as `'light'`, `'dark'`, or `'system'` string in localStorage - Icon transition must be smooth — no abrupt swaps - Respect `prefers-reduced-motion`: skip animation if reduced motion is preferred # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a sample page with header, text, and cards to demonstrate theme switching - Well-commented code with the theme initialization script in `<head>` and interactive logic before `</body>`