Editorial Parallax
Elegant parallax feature section with scroll-driven animations and editorial typography.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| features | Array<{number, title, description}> | 3 Uilora steps | Array of numbered feature items. |
| title | string | Crafted with Precision | Large editorial heading text. |
| subtitle | string | Every detail matters. | Italic subtitle text. |
| image | string | Unsplash abstract art | Hero image URL for the parallax panel. |
When to Use
Perfect for luxury brands, architectural portfolios, and editorial landing pages that want an elegant scroll-driven narrative with parallax depth effects.
Best Practices
Use high-quality, high-resolution images for the parallax panel. Keep features to 3-4 items for a clean editorial flow. Pair with serif or display typography for maximum impact.
Why This Component Matters
Editorial parallax layouts add luxury and depth to digital storytelling. The scroll-driven animations create a cinematic browsing experience that holds attention and conveys premium quality.
FAQ
QHow does the parallax work?
It uses Framer Motion's useScroll and useTransform hooks for hardware-accelerated scroll-driven transforms on both text and image layers.
QCan I use a video instead of an image?
The image prop accepts any URL. For video, you would need to modify the component to use a video element.
QIs it mobile friendly?
Yes, the layout stacks vertically on mobile with reduced parallax intensity for a smooth experience.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.