Parallax Storytelling

Stylegeneral

Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered. Best for Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns.

Scroll-driven narrative layered scrolling immersive progressive disclosure cinematic scroll-triggered

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Parallax Storytelling

Keywords: Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered
Primary colours: Story-dependent, often gradients and natural colors, section-specific palettes
Secondary colours: Section transition colors, depth layer colors, narrative mood colors
Effects & animation: transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations
Best for: Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns
Do not use for: E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required

## Prompt keywords
Design a parallax storytelling page. Use: scroll-driven narrative, layered backgrounds (3-5 layers), fixed/sticky sections, cinematic transitions, progressive disclosure, full-screen chapters, depth perception.

## CSS / technical
position: fixed/sticky, transform: translateY(calc()), perspective: 1px, z-index layering, scroll-snap-type, Intersection Observer for triggers, will-change: transform

## Implementation checklist
☐ Layers parallax smoothly, ☐ Story flows naturally, ☐ Mobile alternative provided, ☐ Performance optimized, ☐ Skip option available, ☐ Reduced motion fallback

## Design system variables
--parallax-speed-bg: 0.3, --parallax-speed-mid: 0.6, --parallax-speed-fg: 1, --section-height: 100vh, --transition-duration: 600ms, --perspective: 1px

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source