animation

Skeleton Loading Screen

Animated placeholder UI for content loading states.

skeleton loading animation placeholder | Claude 4.6 Opus

Prompt

# 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

Notes

Prompt

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

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
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
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
Create multiple skeleton variants:
- Single card skeleton
- Grid of 3 skeleton cards (demonstrates loading a list)
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

Notes

Works great as a loading state before API data arrives.
Keep shimmer speed between 1.5s–2s for a natural, comfortable feel.
The shimmer highlight color should be subtle — too bright feels distracting in dark mode.

Related Prompts

Scroll Reveal Animations

Intersection Observer-based fade-in animations.

# 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

scroll animation intersection-observer +1

GPT 5.3 Ultra

Typewriter Text Effect

Auto-typing text animation with blinking cursor.

# 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

typewriter animation text +1

Gemini 3.1 Pro

Stripe-style Animated Hero

Modern SaaS hero with gradients and motion

# 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

stripe animation gradient

Claude 4.6 Opus

Theme Switcher Toggle

Animated dark/light mode toggle with system detection.

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

theme toggle dark-mode +1

GPT 5.3 Ultra