utility

Theme Switcher Toggle

Animated dark/light mode toggle with system detection.

theme toggle dark-mode animation | GPT 5.3 Ultra

Prompt 

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

Notes

Prompt

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>

Notes

  • Use matchMedia('(prefers-color-scheme: dark)') to detect system preference.
  • Store preference as ‘light’, ‘dark’, or ‘system’ for three-state support.
  • Place the theme initialization script in <head> to prevent flash of incorrect theme.

Related Prompts

View prompt details

Keyboard Shortcuts Panel

Floating panel showing available keyboard shortcuts.

# Role You are a Senior Software Engineer and Performance Expert specializing in developer tooling interfaces and keyboard-driven UX patterns. # Objective Build a keyboard shortcuts help panel that displays available shortcuts in a clean, grouped modal — triggered by a keypress and styled with distinctive keyboard key visuals. # Instructions 1. Implement the trigger mechanism: - Listen for the `?` key press (Shift + /) to open the panel - Toggle behavior: pressing `?` again closes the panel 2. Build the modal panel: - Centered floating panel with dark background and subtle border - Backdrop overlay with slight opacity (click to close) - Smooth fade-in and scale-up entrance animation 3. Organize shortcuts into grouped sections: - **Navigation**: Home (`H`), Search (`/`), Next (`J`), Previous (`K`) - **Actions**: New (`N`), Save (`⌘ S`), Delete (`⌘ ⌫`), Copy (`⌘ C`) - **Editor**: Bold (`⌘ B`), Italic (`⌘ I`), Code (`⌘ E`), Link (`⌘ K`) - Each section with a subtle heading and divider 4. Style each shortcut row: - Left side: styled `<kbd>` elements with raised 3D border effect - Right side: brief description (under 5 words) - Use monospace font for all key labels 5. Close behavior: - Escape key closes the panel - Clicking outside the panel closes it - Transition out with fade effect # Constraints - Vanilla HTML, CSS, and JavaScript only — no dependencies - Style `<kbd>` elements with a raised 3D effect: `border-bottom: 2px solid`, `box-shadow`, and `border-radius: 4px` - Use monospace font (`font-family: monospace`) for key labels - Keep descriptions under 5 words for scannability - Panel should not exceed 500px width - Must be keyboard-accessible: focus management within the panel # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include at least 12 shortcut entries across 3 groups - Clean, well-indented code with comments for each section

keyboard shortcuts panel +1
Claude 4.6 Opus
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

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