landing-page

Animated Stats Counter

Scroll-triggered counting animation for key metrics.

stats counter animation scroll | Claude 4.6 Opus

Prompt

# Role
You are a Senior Frontend Developer and Motion Design Engineer specializing in scroll-triggered animations, number transitions, and high-impact landing page sections.

# Objective
Build a scroll-triggered animated stats counter section that counts up key metrics when scrolled into view, with smooth easing, suffix support, and a polished layout — designed for landing pages and marketing sites.

# Instructions
1. Create the stats section layout:
   - Full-width section with dark background and subtle top/bottom borders
   - 4 stat items in a horizontal row, evenly spaced
   - Centered content with max-width constraint (1200px)
   - Generous vertical padding for visual breathing room
2. Design each stat item:
   - Large number display (3rem+) in bold, accent-colored text
   - Support for suffixes and prefixes: "10K+", "$2.5M", "99.9%", "150+"
   - Descriptive label beneath the number in muted, smaller text (e.g., "Active Users", "Revenue", "Uptime", "Countries")
   - Optional: small icon above the number related to the metric
3. Implement the counting animation:
   - Numbers start at 0 and count up to the target value
   - Trigger: animation starts when the section enters the viewport (Intersection Observer)
   - Easing: use ease-out curve so counting decelerates toward the end
   - Duration: 2 seconds per counter
   - Stagger: each counter starts 150ms after the previous one
   - Animate only once — do not re-trigger on subsequent scrolls
4. Handle number formatting:
   - Integers: no decimal places (e.g., "10,000")
   - Decimals: respect the target's decimal places (e.g., "99.9")
   - Thousands separator: add commas for readability
   - Preserve prefix/suffix throughout the animation
5. Add subtle background polish:
   - Faint grid pattern or dot matrix behind the stats
   - Subtle gradient overlay for depth
   - Optional: counter numbers have a faint glow on completion

# Constraints
- Use `IntersectionObserver` to trigger animations — no scroll event listeners
- `requestAnimationFrame` for smooth counting — no `setInterval`
- Ease-out timing using a cubic bezier or manual easing function
- `font-variant-numeric: tabular-nums` on all numbers to prevent layout shift during counting
- Semantic HTML with `<section>` and descriptive `aria-label`
- Dark mode only
- Responsive: 2×2 grid on tablet, single column on mobile

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Include 4 realistic stat examples with varied formats (integer, decimal, with prefix/suffix)
- Well-commented code with sections: layout, Intersection Observer, counting logic, easing function

Notes

Prompt

Role

You are a Senior Frontend Developer and Motion Design Engineer specializing in scroll-triggered animations, number transitions, and high-impact landing page sections.

Objective

Build a scroll-triggered animated stats counter section that counts up key metrics when scrolled into view, with smooth easing, suffix support, and a polished layout — designed for landing pages and marketing sites.

Instructions

Create the stats section layout:
- Full-width section with dark background and subtle top/bottom borders
- 4 stat items in a horizontal row, evenly spaced
- Centered content with max-width constraint (1200px)
- Generous vertical padding for visual breathing room
Design each stat item:
- Large number display (3rem+) in bold, accent-colored text
- Support for suffixes and prefixes: “10K+”, “$2.5M”, “99.9%”, “150+”
- Descriptive label beneath the number in muted, smaller text (e.g., “Active Users”, “Revenue”, “Uptime”, “Countries”)
- Optional: small icon above the number related to the metric
Implement the counting animation:
- Numbers start at 0 and count up to the target value
- Trigger: animation starts when the section enters the viewport (Intersection Observer)
- Easing: use ease-out curve so counting decelerates toward the end
- Duration: 2 seconds per counter
- Stagger: each counter starts 150ms after the previous one
- Animate only once — do not re-trigger on subsequent scrolls
Handle number formatting:
- Integers: no decimal places (e.g., “10,000”)
- Decimals: respect the target’s decimal places (e.g., “99.9”)
- Thousands separator: add commas for readability
- Preserve prefix/suffix throughout the animation
Add subtle background polish:
- Faint grid pattern or dot matrix behind the stats
- Subtle gradient overlay for depth
- Optional: counter numbers have a faint glow on completion

Constraints

Use IntersectionObserver to trigger animations — no scroll event listeners
requestAnimationFrame for smooth counting — no setInterval
Ease-out timing using a cubic bezier or manual easing function
font-variant-numeric: tabular-nums on all numbers to prevent layout shift during counting
Semantic HTML with <section> and descriptive aria-label
Dark mode only
Responsive: 2×2 grid on tablet, single column on mobile

Output Format

Single HTML file with embedded <style> and <script> blocks
Include 4 realistic stat examples with varied formats (integer, decimal, with prefix/suffix)
Well-commented code with sections: layout, Intersection Observer, counting logic, easing function

Notes

IntersectionObserver is the performant way to trigger scroll animations — never use scroll event listeners.
requestAnimationFrame with an ease-out curve produces smooth, natural-feeling number transitions.
tabular-nums prevents layout jitter as digits change during the counting animation.

Related Prompts

Feature Showcase Section

Icon-based feature grid with hover lift effect.

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in landing page design and visual hierarchy optimization. # Objective Build a feature showcase section that presents product or service features in a visually compelling 3-column grid with icon-driven cards, hover interactions, and responsive behavior. # Instructions 1. Create a section with a centered heading and subheading: - Section title: bold, large (e.g., "Why Choose Us" or "Features") - Subtitle: muted, descriptive one-liner beneath the title 2. Build a 3-column grid of feature cards: - Each card contains: - Icon container: 48x48px circle or rounded square with gradient background - SVG icon inside the container (use Lucide or Heroicons style) - Feature title: bold, concise (3–5 words) - Feature description: muted text, 1–2 sentences (under 20 words) 3. Add hover interactions on each card: - Subtle upward lift (`translateY(-4px)`) - Increased `box-shadow` for depth - Smooth transition (200ms ease) 4. Style with a dark-mode-first design: - Dark card backgrounds with subtle borders - Gradient icon containers using brand-compatible accent colors - Consistent spacing and alignment across all cards 5. Ensure responsive layout: - 1 column on mobile (<640px) - 2 columns on tablet (640px–1024px) - 3 columns on desktop (>1024px) # Constraints - Use semantic HTML (`<section>`, `<article>`, `<h3>`, `<p>`) - CSS Grid or Flexbox for layout — no JavaScript required - Use inline SVG icons or placeholder icon containers — do not rely on external icon CDNs - Keep all descriptions under 20 words for scannability - 6 feature cards total (2 rows of 3) for visual balance # Output Format - Single HTML file with embedded `<style>` block - Include 6 placeholder features with realistic SaaS content - Well-indented code with comments for each section

features icons grid +1

GPT 5.3 Ultra

Gradient Hero Section

A bold hero section with animated gradient background.

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in high-impact landing page design and CSS animation. # Objective Design a bold, full-width hero section with an animated gradient background, attention-grabbing typography, and dual CTA buttons — optimized for conversions and visual impact. # Instructions 1. Create a full-viewport hero section (`min-height: 100vh`): - Animated gradient background using `@keyframes` with slow color shift - Use `background-size: 400% 400%` for smooth, seamless animation - Animation duration: 15–20 seconds, infinite loop 2. Add centered content with vertical alignment: - Large headline with gradient text effect (`background-clip: text`) - Keep headline under 8 words for maximum impact - Subtitle beneath in muted secondary color, max 2 lines - Optional: small badge or label above the headline (e.g., "New Release" or "v2.0") 3. Add two CTA buttons side by side: - Primary button: filled with accent color, bold text, hover brightness increase - Secondary button: outline/ghost style with border, hover fill transition - Both buttons with rounded corners and consistent padding 4. Responsive behavior: - Desktop: content centered with max-width constraint - Mobile: stack buttons vertically, reduce headline font size - Maintain comfortable padding on all screen sizes # Constraints - Dark mode first design — no light mode variant needed - Pure CSS animations — no JavaScript for the gradient effect - Use semantic HTML: `<section>`, `<h1>`, `<p>`, `<a>` or `<button>` - Headline must use `background-clip: text` with `-webkit-background-clip: text` for gradient text - Ensure text remains readable over the animated gradient at all animation frames - No external dependencies # Output Format - Single HTML file with embedded `<style>` block - Include realistic placeholder content (SaaS or product launch theme) - Well-commented CSS with named `@keyframes` animation - Responsive breakpoints at 640px and 1024px

hero gradient landing +1

Claude 4.6 Opus

Testimonial Carousel

Auto-scrolling customer testimonial slider.

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in social proof components, CSS scroll mechanics, and lightweight interactive UI. # Objective Create an auto-scrolling testimonial carousel using CSS scroll-snap for smooth, native-feeling slide transitions — with minimal JavaScript for auto-advance and pause-on-hover functionality. # Instructions 1. Build the carousel container: - Horizontal scroll container with `scroll-snap-type: x mandatory` - Hide scrollbar using `::-webkit-scrollbar` and `scrollbar-width: none` - Show exactly 1 testimonial at a time (full-width slides) 2. Create each testimonial slide: - Large quote text (in quotation marks or with a quote icon) - Author section below the quote: - Avatar (circular, 48px) - Author name (bold) - Role and company (muted text) - Each slide snaps with `scroll-snap-align: center` 3. Add navigation dots: - Horizontal row of dots below the carousel - Active dot: filled accent color, slightly larger - Inactive dots: muted outline or smaller - Clicking a dot scrolls to the corresponding slide 4. Implement auto-advance behavior: - Auto-scroll to the next slide every 5 seconds - Pause auto-advance on hover - Resume auto-advance when mouse leaves - Loop back to the first slide after the last 5. Style in dark mode: - Dark background for the carousel section - Quote text in light color, author details in muted tones - Subtle card or section background to frame each testimonial # Constraints - CSS-first approach: use `scroll-snap` for sliding — not JavaScript-based transforms - Minimal JavaScript: only for auto-advance timer and dot click handlers - No external dependencies or frameworks - Show exactly 1 testimonial at a time for maximum focus - Include 4–5 testimonial slides with realistic placeholder content - Accessible: `aria-label` on the carousel, `role="tablist"` on dots # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 4–5 realistic testimonials (SaaS or tech product theme) - Well-commented code with clear sections for layout, animation, and interaction

testimonial carousel social-proof +1

Gemini 3.1 Pro

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