Build parallax sections, AI chat interfaces, and bento grids with AI prompts

Parallax Storytelling Hero Section

Parallax storytelling section with three full-viewport panels and Apple-style cinematic image reveal on scroll, for editorial landing pages and product story pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Sticky Scroll Stacked Cards Section

Apple-style sticky scroll stacked cards section for landing pages and product feature walkthroughs, cards pin as the reader scrolls. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Apple-Style Product Hero Section

Apple-style product hero section for landing pages, product launches, and marketing sites, with a display headline, one subtitle, and two text links. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

AI Chatbot Chat Interface

AI chat interface with streaming message bubbles, growing input, and suggestion chips, for ChatGPT-style AI products, in-app assistants, and support chat modals. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Liquid Gradient Background Blue Purple

Blue purple liquid gradient background for AI product landing pages, hero sections, and modal backdrops. Animated silk-flow mesh gradient in electric blue and soft purple. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React, Tailwind, and WebGL source included.

Liquid Gradient Background Blue Yellow Pink

Blue yellow pink liquid gradient background for landing pages, hero sections, and modals. Animated silk-flow mesh gradient in electric blue, warm yellow, and soft pink. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React, Tailwind, and WebGL source included.

Liquid Gradient Background Green Teal

Green teal liquid gradient background for landing pages, nature-inspired product sites, and creative hero sections. Animated silk-flow mesh in electric teal, lime green, and cyan. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch.

Liquid Gradient Background Orange Coral

Orange coral liquid gradient background for warm brand landing pages, fashion product sites, and bold hero sections. Animated silk-flow mesh in deep coral, golden orange, and warm pink. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch.

Liquid Gradient Background Purple Rose

Purple rose liquid gradient background for luxury brand pages, beauty product sites, and dark creative hero sections. Animated silk-flow mesh in deep purple, rose pink, and soft lavender. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch.

Orbit Image Gallery Hero Section

Orbit image gallery hero section with cards rotating around a centered headline, for portfolio landing pages and agency hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

3D Parallax Depth Hero Section

Three-layer parallax depth hero section with image layers that recede on scroll, for cinematic product story pages and editorial landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Expanding Clip Scroll Hero (Apple-Style)

Apple-style expanding clip scroll hero, a small card expands to full-bleed as the reader scrolls, for product launch pages and campaign hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Reverse Zoom Scroll Hero (Full-Bleed to Card)

Reverse zoom scroll hero, a full-bleed image shrinks into a rounded card as the reader scrolls, for product landing pages where the closing headline matters more than the opening image. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Pinned Text Sequence Scroll Hero (Product Story)

Apple-style pinned text sequence scroll hero with cross-fading headlines over a fixed image, for product story pages and campaign landing sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Horizontal Split Panels Scroll Hero

Horizontal split panels scroll hero, top and bottom image panels part on scroll to reveal a headline, for product reveal pages and campaign hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Ken Burns Slow Pan Scroll Hero

Ken Burns slow pan scroll hero with a cinematic horizontal image pan and bottom-left overlay copy, for editorial magazine covers and film production sites. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Ascending Image Slide-Up Hero (Type-First)

Ascending image slide-up scroll hero, the image rises from below the fold as the reader scrolls, for type-first product pages and essay openings. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Zoom Out Reveal Scroll Hero

Zoom out reveal scroll hero, an extreme close-up image scales out to the full scene on scroll, for cinematic product pages and editorial hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Vertical Split Scroll Hero

Vertical split scroll hero, left and right image panels part on scroll to reveal a centered column of content, for product reveal pages and campaign landing sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Blur to Focus Scroll Hero

Blur to focus scroll hero, a blurred image sharpens as the reader scrolls, for photography portfolios and product story pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Sticky Text Marquee Hero

Sticky text marquee hero with a centered headline pinned in the viewport and a drifting marquee behind, for editorial magazine covers and essay landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Word-by-Word Text Reveal Scroll Hero

Word-by-word text reveal scroll hero, a headline arrives one word at a time as the reader scrolls, for essay openings and manifesto landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Sticky Kicker Manifesto Hero

Sticky kicker manifesto hero with a top-of-page label that updates as the reader scrolls through sections, for long-form editorial pages and multi-chapter product story pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Pull Quote Testimonial Hero

Pull quote testimonial hero with a centered quote pinned over a full-bleed image, for case study pages and social proof hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Line-by-Line Text Reveal Scroll Hero

Line-by-line text reveal scroll hero, each line fades in as the reader scrolls, for essay openings and blog post hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Sticky Split Text Scroll Hero

Sticky split text scroll hero, a large headline splits open on scroll to reveal a subtitle between, for product story pages and single-word big-idea headlines. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Scroll Progress Bar (Top of Page)

Scroll progress bar for pages, a thin top-of-page line that fills as the reader scrolls, for long-form articles, blog posts, and documentation pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Reading Progress Rail (Sidebar with Read Time)

Reading progress rail with percent-complete and estimated read-time labels, for blog posts, documentation, and long-form editorial articles. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Sticky Table of Contents Sidebar

Sticky table of contents sidebar for long-form article pages, highlights the visible section as the reader scrolls, for documentation sites, knowledge bases, and blog posts. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Onboarding Progress Bar (Multi-Step Numbered)

Multi-step onboarding progress bar with numbered circles connected by a filling line, for SaaS signup flows, product setup wizards, and ecommerce checkout funnels. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

XP Progress Bar (Gamification Level Card)

XP progress bar gamification card showing level, XP, and progress to the next level, for gamified learning apps, fitness apps, and community platforms. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Circular Progress Ring (SVG Percentage)

Circular progress ring showing a percentage inside an SVG ring, for SaaS dashboards, AI generation UIs, credit meters, and stat cards. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Leaderboard Row (Ranking with Change Indicator)

Leaderboard row with rank, avatar, points, and change indicator, for community leaderboards, sales gamification dashboards, and competitive-play interfaces. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Command Palette (⌘K Search Modal)

Command K search modal palette with grouped results and keyboard navigation, for SaaS apps, internal dashboards, and developer tools that need fast keyboard actions. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Bento Grid Feature Section (Vercel-Style Landing)

Vercel-style bento grid feature section with variable card sizes, for SaaS marketing pages, AI product landing pages, and Linear-style feature sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

AI Copilot Sidebar (Right-Panel Assistant)

AI copilot sidebar with slide-in behavior, quick actions, and a growing input, for AI-native SaaS apps, in-app assistants, and developer tool sidebars. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Masonry Image Grid (Pinterest-Style Multi-Column Gallery)

Pinterest-style masonry image grid with variable image heights, for photography portfolios, design agency landing pages, and product image galleries. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Tilted Card Fan Gallery (Hover to Lift)

Tilted card fan gallery hero with hover-to-lift interaction, for portfolio hero sections, product gallery previews, and agency landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Vertical Portrait Parallax Gallery (Editorial Image Stack)

Vertical portrait parallax gallery with staggered image scroll speeds, for fashion portfolios, model agency websites, and photographer landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Scroll Chapter Panels

Scroll chapter panels with per-panel horizontal text slide-in and image fade, for editorial landing pages and product story sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Pinned Feature Tab Showcase

Pinned feature tab showcase with a sticky left tab list and scroll-driven image crossfade on the right, for SaaS feature sections and product walkthroughs. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Scroll Quote Reveal

Scroll quote reveal with word-by-word text animation on a dark textured background, for testimonial sections and pull-quote landing moments. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Count-Up Stats on Scroll

Count-up stats section where numbers animate from zero when they enter the viewport, with a subtle parallax background, for product landing pages and press sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Velocity Image Strip

Velocity image strip that accelerates when the reader scrolls faster, for portfolio strips and work showcase sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Parallax CTA Banner

Parallax CTA banner with a background image moving at 0.4x scroll speed and a headline that scales up as the section enters the viewport, for landing page conversion sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Scroll Shrink Navbar

Scroll shrink navbar that morphs from a full-width transparent bar into a compact pill with blur backdrop on scroll, for parallax landing pages and editorial sites. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Gradient Scroll Footer

Gradient scroll footer where the warm sunset gradient deepens as the reader scrolls into it, for editorial landing pages and parallax narrative sites. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.

Sticky Product Spotlight

Sticky product spotlight where a product image stays pinned while benefit copy scrolls alongside it in cross-fading segments, for e-commerce product pages and product launch sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.