# 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 text effects, CSS animation, and performant JavaScript-driven visual interactions. # Objective Create a typewriter text effect component that types out strings character by character, supports multiple strings with delete-and-retype cycling, and features a blinking CSS cursor — configurable and performant. # Instructions 1. Build the typewriter display element: - Container element with monospace or display font - Text content area that grows as characters are typed - Blinking cursor at the end using pure CSS (`@keyframes blink`) - Cursor as a `::after` pseudo-element or `<span>` (thin vertical bar) 2. Implement the typing logic in JavaScript: - Type out a string character by character - Default typing speed: 80ms per character (configurable) - Delete speed: 40ms per character (faster than typing for natural feel) - After completing a string, pause for 1.5 seconds - Then delete the string character by character - Move to the next string in the array and repeat - Loop infinitely through the string array 3. Support configuration: - Array of strings to cycle through - Typing speed (ms per character) - Delete speed (ms per character) - Pause duration between strings 4. Create the blinking cursor: - Pure CSS animation: `opacity: 1 → 0` every 600ms - Cursor visible during pauses, steady (not blinking) during typing 5. Use `requestAnimationFrame` for timing: - More performant than `setInterval` or `setTimeout` - Track elapsed time for frame-accurate character reveals # Constraints - Vanilla JavaScript only — no libraries or frameworks - Pure CSS for the cursor animation — no JavaScript-driven cursor - Use `requestAnimationFrame` instead of `setInterval` for smoother performance - Must work with any font and container width - Keep the JavaScript under 60 lines for easy reuse - Include `aria-label` with the full text on the container for accessibility # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a demo with 3–4 sample strings (developer/SaaS theme) - Well-commented code with a clear configuration section at the top

# Role You are a Senior Frontend Developer specializing in loading states, progress feedback, and CSS animations. # Objective Build an animated progress bar component with smooth fill animation, percentage label, and striped/indeterminate variants — designed for file uploads, loading states, and process tracking. # Instructions 1. Create the progress bar container: - Wrapper element with rounded corners - Dark track background (unfilled portion) - Accessible with proper labeling 2. Build the progress bar fill: - Colored fill representing the percentage - Smooth transition when value changes - Support values from 0% to 100% 3. Add percentage label: - Display current percentage on or beside the bar - Update in sync with the fill animation - Option to show inside or outside the bar 4. Implement striped variant: - Diagonal stripes pattern on the fill - Optional: animated stripes that move (CSS animation) 5. Add indeterminate state: - Pulsing or sliding animation when progress is unknown - Different visual treatment to indicate unknown duration # Constraints - Use CSS transitions or animations — no JavaScript animation libraries - `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` attributes - `aria-label` describing what is being tracked - Tailwind CSS only — no custom CSS - Include demo with buttons to adjust progress # Output Format - Single HTML file using Tailwind CSS CDN - Include multiple variants: determinate, striped, indeterminate - Well-commented code with clear sections for each variant

# Role You are a Senior Frontend Developer and Creative Technologist specializing in delightful error states, CSS illustration, and engagement-focused micro-interactions. # Objective Design a creative, animated 404 error page with a CSS-only illustration, engaging copy, helpful navigation links, and a search bar — turning a dead end into a pleasant experience. # Instructions 1. Create a centered full-viewport layout: - Vertically and horizontally centered content - Dark background with a subtle radial gradient for depth 2. Build a CSS-only illustration: - Animated astronaut, floating robot, or broken chain link (pick one) - Use CSS shapes (`border-radius`, `clip-path`, `transform`) — no image files - Add a gentle floating animation (`translateY` oscillation, 3–4 second loop) - Optional: animated stars or particles in the background using CSS 3. Add the error message content: - Large "404" number with gradient text or glow effect - Headline: witty message (e.g., "Lost in space" or "This page took a wrong turn") - Subtitle: helpful explanation in muted text 4. Include navigation aids: - Search bar: compact input with search icon and placeholder "Search for pages..." - Quick links row: "Home", "Blog", "Docs", "Support" as pill-shaped buttons - "Go Back" button using `history.back()` with a left arrow icon 5. Add micro-interactions: - Illustration reacts to mouse movement (subtle parallax via CSS or minimal JS) - Buttons have hover scale + glow effects - Search input expands on focus # Constraints - Illustration must be CSS-only — no SVGs, images, or icon fonts - Minimal JavaScript (parallax mouse tracking only — everything else in CSS) - Semantic HTML with proper heading hierarchy - The page must feel alive and engaging, not like a dead end - Dark mode only - Responsive: illustration scales down on mobile, links stack vertically # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Well-commented code with sections: illustration CSS, layout, animations, interactivity - Include all navigation links as working `<a>` tags with `href="#"` placeholders