Your work,
front and centre.
A hero that leads with the images instead of describing them. Swap in your own and the corridor rebuilds around them.
Wider angle · faster · denser
Every length in cqw.
The corridor is sized against its container, not the viewport, so it keeps its proportions in a card, a section or a full-bleed page.
Options
Set any of these as a data-* attribute on the
.ish-hero element. Anything left off falls back to the
default. Lengths are cqw — a percentage of the container's
own width.
data-cards9Cards on each rail at once. Denser, not faster.data-speed18Seconds for one card to travel the whole corridor.data-axis55Vertical placement of the corridor's axis, in %.data-perspective30Strength of the projection. Lower is wider-angle.data-card-width18Card width in world units.data-card-height25Card height in world units.data-card-radius0.4Corner radius on each card.data-birth-height2.6On-screen card height at the waist, where a card is born.data-exit-height46On-screen card height as it leaves the frame.data-rail-birth−11Lateral offset at birth. Negative crosses the axis.data-rail-exit44Lateral offset once the rails have opened.data-fan3.3How front-loaded the opening is. >1 opens early, then holds.data-turn-birth6Y-rotation at birth, in degrees.data-turn-exit28Y-rotation at exit, in degrees.data-stops24Keyframe stops tracing the curve. Raise if motion looks faceted.Supplying images
Images come from ISH.images in script.js,
or per-instance by putting a JSON array in a
data-images attribute. Both rails run the same sequence, so
the corridor reads as one mirrored stream; fewer images than
data-cards simply repeat.