Cinematic Slice Pagination
Dramatic cinematic image pagination with 3-slice vertical animation and blur depth effects. High-end visual transitions with gradient overlays.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| totalPages | number | 5 | Total number of pages to paginate through. |
| className | string | undefined | Additional CSS classes for custom styling. |
When to Use
Perfect for high-end photography portfolios, cinematic brand experiences, and Next.js sites that want a dramatic visual transition. Use this React component for image-based pagination with vertical slice animations and blur depth effects.
Best Practices
Follow React best practices by pairing this with high-resolution, high-impact imagery. Maintain scalable component architecture by keeping the `totalPages` low for maximum impact. Optimize performance by using hardware-accelerated transforms for the slice animations.
Why This Component Matters
Vertical slice transitions add a layer of production value and cinematic polish that standard fades lack. This customizable UI component givesคุณ a hardware-accelerated version of this aesthetic, improving user engagement through visual storytelling.
FAQ
QHow does the slice animation work?
The image is split into three vertical sections that animate independently with slight delays, creating a 'shutter' or 'glitch' entry effect.
QCan I adjust the slice count?
The current version is hard-coded to 3 slices for optimal balance, but the component's internal logic can be extended for more segments.
QDoes it support video?
The slice logic is optimized for images, but can be adapted for HTML5 videos to create ultra-premium motion background transitions.
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.