Back to the library
Free

Hero Showcase

A hero with a stream of screenshots drifting right to left on a tilted plane, fading out behind the copy at both edges.

Open full screen

About this template

The showcase sits behind the copy on a plane turned thirty degrees and sheared ten, and the screenshots drift right to left on a loop that never restarts. A gradient mask dissolves them towards the copy so nothing pops in or snaps away.

The images are sized by height, not width: each one fills the plane and takes its width from a 3:4 ratio, which is why they read as full page screenshots rather than thumbnails. Swap them for your own and the geometry holds.

No plugin needed. The whole thing is CSS and the CSS travels inside the copied JSON, so the template works the moment you paste it. The loop is seamless because the travel distance is half the track plus half a gap; that half gap is the difference between a loop and a visible jump every cycle.

On narrow screens the plane spans the full width, drops to thirty percent opacity and the mask covers the whole width, so the copy stays readable over the top. Rotation, shear, speed, gap and fade are CSS variables on the section.

Copy this template

Free templates are open to any account. Create one and this unlocks straight away.

Create a free account

Details

Category
Framework
Access