HeroParallax

A scroll‑based parallax hero section that adds 3D rotation and translation effects. It showcases exactly 15 real portfolio items in three animated rows that move with spring physics. Intended only for portfolio, creative, or agency sites that can provide 15 fully populated items. Each item links to an internal page. Do not use on general‑purpose sites; use the standard Hero component instead.

Use Cases

• Portfolio showcases (agency work, design projects, creative pieces)
• Agency websites (client work showcase, case studies preview)
• Creative portfolios (photography, art, design work)

Properties

title

Main headline displayed fixed at top. Supports \n for line breaks. Should be attention‑grabbing. Type: string. Required.

Tip: Length – 2‑6 words per line, 1‑2 lines total; Style – bold, declarative statements work best; LineBreak – use \n to create a dramatic line break.

description

Supporting text below title. Elaborates on the headline. Displays at top with title. Type: string. Required.

Tip: Length – 2‑3 sentences (30‑50 words); Tone – match brand voice (professional, creative, or casual); Content – explain what the products/items represent.

products

MANDATORY array of EXACTLY 15 product/item objects. Each MUST have title, link, AND thumbnail (real image URL). Displayed in 3 rows of 5 with parallax scroll effect. ZERO products = BROKEN component. NEVER pass an empty array. Type: array. Required. Minimum items: 15. Maximum items: 15.

Tip: Count – EXACTLY 15 products REQUIRED (5 per row × 3 rows); Images – EVERY product MUST have a thumbnail; use 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. Optional.

Best Practices

• MANDATORY: Provide EXACTLY 15 products with real thumbnail images (5 per row × 3 rows). Zero or fewer than 15 = BROKEN component.
• Each product MUST have a non‑empty title, link (page slug), and thumbnail (real image URL from search_unsplash).
• 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 — NEVER leave thumbnail empty.
• Title and description appear fixed at top – keep them compelling.
• If you cannot provide 15 products with images, DO NOT use HeroParallax — use a different hero component instead.

Common Mistakes

Passing an empty products array [] or omitting products entirely

Why it's a problem: HeroParallax renders NOTHING without products — it becomes a blank white section. This is the #1 worst mistake.

Fix: NEVER use HeroParallax without 15 fully populated products. If you cannot provide 15 items with images, use a different hero component.

Using fewer than 15 products

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

Fix: ALWAYS provide exactly 15 products (5 per row × 3 rows). This is mandatory.

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’.