HeroParallax

A scroll‑based parallax hero section that applies 3D rotation and translation effects to three animated rows of products or items. Each row moves according to scroll position using spring physics, and every item links to a page within your app.

Use Cases

• Portfolio showcases (agency work, design projects, creative pieces)
• SaaS landing pages (feature highlights, integrations showcase)
• Product galleries (e‑commerce product lines, featured items)
• Agency websites (client work showcase, case studies preview)
• Creative portfolios (photography, art, design work)
• App showcases (mobile app screenshots, software features)
• Team/partner showcases (partner logos with links)
• Service catalogs (different service offerings)
• Resource libraries (tools, templates, downloads)

Properties

title

Main headline displayed fixed at top. Supports \n for line breaks. Should be attention‑grabbing. Type: string. Recommendations: Length: 2‑6 words per line, 1‑2 lines total; Style: Bold, declarative statements work best; LineBreak: Use \n to create line break for dramatic effect.

description

Supporting text below title. Elaborates on the headline. Displays at top with title. Type: string. Recommendations: Length: 2‑3 sentences (30‑50 words); Tone: Match brand voice - professional, creative, or casual; Content: Explain what the products/items represent.

products

Array of 15 product/item objects. Displayed in 3 rows of 5 with parallax scroll effect. Each row animates in opposite direction. Type: array. Minimum items: 10. Maximum items: 15. Recommendations: Count: 15 products for full 3‑row effect. Minimum 10 for decent visual; Images: Use landscape images (600x400px +). search_unsplash with specific queries; Links: Each product should link to a relevant page in your app; Variety: Mix of image styles adds visual interest.

customCss

Custom CSS styles for advanced styling. Type: string.

Best Practices

• Use exactly 15 products for best visual effect (5 per row × 3 rows)
• Each product should link to a page in your app (use page slugs)
• Use high‑quality landscape images (600 × 400px minimum, 16:9 or 4:3 ratio)
• Keep product titles short (2‑4 words) as they appear on hover
• Use consistent image styles across all products for visual cohesion
• Place at top of page for maximum scroll‑effect impact
• Use search_unsplash for professional, contextually relevant product images
• Title and description appear fixed at top - keep them compelling

Common Mistakes

Using fewer than 10 products

Why it's a problem: The parallax effect relies on 3 rows. Fewer products = incomplete rows and broken visual.

Fix: Always provide 15 products (5 per row × 3 rows) for the intended effect.

Using portrait/square images instead of landscape

Why it's a problem: Products display as wide rectangles. Portrait images get awkwardly cropped.

Fix: Use landscape images (16:9 or 4:3 ratio). search_unsplash with 'landscape' in query.

Not using search_unsplash for product images

Why it's a problem: Made‑up URLs = broken images. The component needs real image URLs.

Fix: Call search_unsplash for each product with specific, contextual queries.

Using external URLs for product links instead of page slugs

Why it's a problem: HeroParallax is designed for internal app navigation. External links bypass routing.

Fix: Use page slugs from your app (e.g., 'about', 'services', 'project-1').

Placing HeroParallax in the middle of a page

Why it's a problem: The scroll effect works best when users start at the top. Mid‑page placement = jarring entrance.

Fix: Place HeroParallax at the very top of the page, typically as the first component.

Using long product titles (5+ words)

Why it's a problem: Titles appear as hover overlays in a small area. Long titles get truncated.

Fix: Keep titles to 2‑4 words: 'Project Alpha', 'Web Design', 'Mobile App'.