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

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)
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
Support configuration:
- Array of strings to cycle through
- Typing speed (ms per character)
- Delete speed (ms per character)
- Pause duration between strings
Create the blinking cursor:
- Pure CSS animation: opacity: 1 → 0 every 600ms
- Cursor visible during pauses, steady (not blinking) during typing
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

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

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

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