Mostar Cinematic Scroll
Mostar Cinematic Scroll is a scroll animation in the UI HUB scroll animations collection. A ~3700px scroll rig: a sticky 100vh .stage inside .cinema-scroll carries seven remote PNG scene layers (sky, back-four glow, bazaar, splitframe left/right, bridge, river close-up).
The component is driven by 3 documented props (compact, showDemoButton, className), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: sticky positioning with overflow:hidden stage; CSS custom property writes from a rAF loop; CSS container queries.
Preview the scroll animation in the browser above, copy the source, and paste it into your project. Scroll Animations components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Mostar Cinematic Scroll?
A cinematic three-screen scroll story for Mostar city built as a pure CSS-variable + requestAnimationFrame scrub engine: parallax scene layers, a bridge that widens and splits under blue haze, fact panels, then an infinite sights slider flying in from the side.
Mostar Cinematic Scroll at a glance
- Category
- Scroll Animations
- Pricing
- Pro component
- Libraries
- React, react-router-dom and Lucide React
- Styling
- Tailwind CSS
- Configurable props
- 3
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Mostar Cinematic Scroll works
A ~3700px scroll rig: a sticky 100vh .stage inside .cinema-scroll carries seven remote PNG scene layers (sky, back-four glow, bazaar, splitframe left/right, bridge, river close-up). A vanilla requestAnimationFrame engine reads scroll progress (lerped at 0.14, snapping under 0.08px) plus damped pointer parallax (lerp 0.12) and writes ~50 CSS custom properties per frame using clamp / smoothstep / segmentInOut helpers. Phase 1 (0-650px): the Ogg Medium MOSTAR title and intro copy exit. Phase 2 (560-1620px, segmentInOut): the bridge widens 67.2cqw->105cqw, lifts, then launches -760px while the splitframe halves part to -/+46cqw (enter^1.5), the river close-up fades in, blur ramps to 14px, brightness drops 25.5%, a blue 74,181,224 shade gradient rises to 0.465/0.42/0.51, and the bridge fact panel slides +58px->-86px. Phase 3 (1760-2700px): bazaar saturation +0.18 and the bazaar panel takes over. Phase 4 (2760-3560px): the sights slider flies in from 420cqw on enter^1.55, counter-scaled by 1/backScale so cards stay screen-true. Phase 5 (3360-3660px): round prev/next controls fade in and become clickable past 0.98, driving a 15-card (3-set) infinite slider with 640ms cubic-bezier(0.22,1,0.36,1) transitions and instant-jump normalization at the set boundaries. Responsive rules are container queries (1500/1100/640px on the root container) so the same markup fits a 296-540px library frame; vh-driven positions resolve through a --mc-vh variable set from the view height.
Technical information for Mostar Cinematic Scroll
| Category | Scroll Animations |
|---|---|
| Libraries | React, react-router-dom and Lucide React |
| Styling | Tailwind CSS |
| Rendering | blend modes, CSS gradients, CSS filters, requestAnimationFrame |
| State change | opening frame: MOSTAR title centered over the bridge scene with intro copy and cream pills to final frame: sights slider parked mid-track with prev/next controls active over the bazaar backdrop |
| Props | 3 configurable |
| Usage example | Included on this page |
What Mostar Cinematic Scroll requires
- sticky positioning with overflow:hidden stage
- CSS custom property writes from a rAF loop
- CSS container queries
- ResizeObserver
- prefers-reduced-motion matchMedia snap
- remote font (Ogg Medium woff2) and remote PNG layers
How to use Mostar Cinematic Scroll
- Install the dependencies: npm install react-router-dom and npm install lucide-react.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <MostarCinematicScroll /> in your page using that import path.
- Pass any of the 3 documented props to change colours, density, speed or behaviour.
Mostar Cinematic Scroll questions
What is Mostar Cinematic Scroll?
A cinematic three-screen scroll story for Mostar city built as a pure CSS-variable + requestAnimationFrame scrub engine: parallax scene layers, a bridge that widens and splits under blue haze, fact panels, then an infinite sights slider flying in from the side.
How does Mostar Cinematic Scroll work?
A ~3700px scroll rig: a sticky 100vh .stage inside .cinema-scroll carries seven remote PNG scene layers (sky, back-four glow, bazaar, splitframe left/right, bridge, river close-up). A vanilla requestAnimationFrame engine reads scroll progress (lerped at 0.14, snapping under 0.08px) plus damped pointer parallax (lerp 0.12) and writes ~50 CSS custom properties per frame using clamp / smoothstep / segmentInOut helpers. Phase 1 (0-650px): the Ogg Medium MOSTAR title and intro copy exit. Phase 2 (560-1620px, segmentInOut): the bridge widens 67.2cqw->105cqw, lifts, then launches -760px while the splitframe halves part to -/+46cqw (enter^1.5), the river close-up fades in, blur ramps to 14px, brightness drops 25.5%, a blue 74,181,224 shade gradient rises to 0.465/0.42/0.51, and the bridge fact panel slides +58px->-86px. Phase 3 (1760-2700px): bazaar saturation +0.18 and the bazaar panel takes over. Phase 4 (2760-3560px): the sights slider flies in from 420cqw on enter^1.55, counter-scaled by 1/backScale so cards stay screen-true. Phase 5 (3360-3660px): round prev/next controls fade in and become clickable past 0.98, driving a 15-card (3-set) infinite slider with 640ms cubic-bezier(0.22,1,0.36,1) transitions and instant-jump normalization at the set boundaries. Responsive rules are container queries (1500/1100/640px on the root container) so the same markup fits a 296-540px library frame; vh-driven positions resolve through a --mc-vh variable set from the view height.
Which category does Mostar Cinematic Scroll belong to?
Mostar Cinematic Scroll is listed under Scroll Animations in the UI HUB catalog. Scroll-linked animation components: parallax layers, pinned and sticky sections, scroll-triggered reveals, expanding scroll panels and 3D scroll transitions. Each one documents whether it uses native scroll timelines or a motion library, which matters for performance on long pages. Load them per section rather than across a whole route.
What does the compact prop do in Mostar Cinematic Scroll?
Preview mode: the stage fills its container and the whole story scrubs against an inner scroll column (the .site-shell element) instead of the window, with --mc-vh derived from the container height. It defaults to false.
What does the showDemoButton prop do in Mostar Cinematic Scroll?
In compact mode, overlay a Live Demo pill that links to the full-screen demo page. It defaults to false.
Is Mostar Cinematic Scroll free to use?
Mostar Cinematic Scroll is a Pro component on UI HUB. Pro components are labelled in the catalog and come with a documented props table on the component page.
Which libraries does Mostar Cinematic Scroll use?
Mostar Cinematic Scroll uses React, react-router-dom and Lucide React and is styled with Tailwind CSS.
What does Mostar Cinematic Scroll need to run?
Mostar Cinematic Scroll needs sticky positioning with overflow:hidden stage, CSS custom property writes from a rAF loop, CSS container queries and ResizeObserver.