# 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 Animation Expert specializing in premium SaaS landing pages, motion design, and high-fidelity UI implementation. # Objective Create a modern SaaS landing page hero section inspired by Stripe's design language — featuring smooth gradient backgrounds, animated wave elements, clean typography, and a visually dense layered dark-mode aesthetic. # Instructions 1. Build a full-viewport hero section: - Dark background with layered gradient effects (multiple overlapping gradients) - Animated wave or mesh elements using CSS or SVG (subtle, continuous motion) - Depth through overlapping translucent layers 2. Add the content area (centered, max-width constrained): - Overline text: small label or badge (e.g., "Now Available" or "v2.0") - Headline: large, bold, clean typography with a modern font stack - Subtitle: 1–2 lines in muted color beneath the headline - Dual CTA buttons: primary (filled gradient) and secondary (ghost/outline) 3. Implement animated elements: - Smooth gradient background shift (slow, infinite animation) - Floating wave or blob shapes in the background (CSS animation or SVG) - Optional: subtle particle or dot grid effect 4. Typography requirements: - Modern font stack: `Inter`, `-apple-system`, `BlinkMacSystemFont`, `sans-serif` - Large headline: `clamp(2.5rem, 5vw, 4.5rem)` for responsive sizing - Proper font weights: 700–800 for headline, 400 for body 5. Ensure visual density: - Multiple overlapping layers create depth (not flat or sparse) - Accent glow effects behind CTAs or headline - Subtle noise texture overlay (optional) for richness # Constraints - Tailwind CSS for layout and typography; custom CSS for animations - Dark mode only — no light mode variant - Animations must be smooth and GPU-accelerated (`will-change`, `transform`) - Performance: no heavy libraries — CSS animations and SVG only - Responsive: works on all screen sizes with fluid typography - Keep animations subtle — they should enhance, not distract # Output Format - Single HTML file with Tailwind CSS CDN and embedded `<style>` for animations - Include realistic SaaS placeholder content (fintech or developer platform theme) - Well-commented code separating layout, animations, and content sections

# 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>`