animation

Typewriter Text Effect

Auto-typing text animation with blinking cursor.

typewriter animation text cursor | Gemini 3.1 Pro

Prompt 

# 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

Notes

Prompt

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

Notes

  • Use requestAnimationFrame for smoother, more performant animation than setInterval.
  • Add a 1.5s pause between strings to give readers time to process the completed text.
  • The cursor should stop blinking during active typing for a realistic effect.

Related Prompts

View prompt details

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
View prompt details

Skeleton Loading Screen

Animated placeholder UI for content loading states.

# 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

skeleton loading animation +1
Claude 4.6 Opus
View prompt details

Creative 404 Page

Animated 404 error page with illustration and navigation hints.

# 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

404 error illustration +1
Claude 4.6 Opus
View prompt details

Animated Progress Bar

A smooth animated progress bar with percentage label and striped variant.

# 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

progress animation loading
Gemini 3.1 Pro