# 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 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 and Motion Design Engineer specializing in scroll-triggered animations, number transitions, and high-impact landing page sections. # Objective Build a scroll-triggered animated stats counter section that counts up key metrics when scrolled into view, with smooth easing, suffix support, and a polished layout — designed for landing pages and marketing sites. # Instructions 1. Create the stats section layout: - Full-width section with dark background and subtle top/bottom borders - 4 stat items in a horizontal row, evenly spaced - Centered content with max-width constraint (1200px) - Generous vertical padding for visual breathing room 2. Design each stat item: - Large number display (3rem+) in bold, accent-colored text - Support for suffixes and prefixes: "10K+", "$2.5M", "99.9%", "150+" - Descriptive label beneath the number in muted, smaller text (e.g., "Active Users", "Revenue", "Uptime", "Countries") - Optional: small icon above the number related to the metric 3. Implement the counting animation: - Numbers start at 0 and count up to the target value - Trigger: animation starts when the section enters the viewport (Intersection Observer) - Easing: use ease-out curve so counting decelerates toward the end - Duration: 2 seconds per counter - Stagger: each counter starts 150ms after the previous one - Animate only once — do not re-trigger on subsequent scrolls 4. Handle number formatting: - Integers: no decimal places (e.g., "10,000") - Decimals: respect the target's decimal places (e.g., "99.9") - Thousands separator: add commas for readability - Preserve prefix/suffix throughout the animation 5. Add subtle background polish: - Faint grid pattern or dot matrix behind the stats - Subtle gradient overlay for depth - Optional: counter numbers have a faint glow on completion # Constraints - Use `IntersectionObserver` to trigger animations — no scroll event listeners - `requestAnimationFrame` for smooth counting — no `setInterval` - Ease-out timing using a cubic bezier or manual easing function - `font-variant-numeric: tabular-nums` on all numbers to prevent layout shift during counting - Semantic HTML with `<section>` and descriptive `aria-label` - Dark mode only - Responsive: 2×2 grid on tablet, single column on mobile # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 4 realistic stat examples with varied formats (integer, decimal, with prefix/suffix) - Well-commented code with sections: layout, Intersection Observer, counting logic, easing function

# 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