Rise
cubic-bezier(0.16, 1, 0.3, 1)
Signature curve for anything entering: fast start, long settle.
ClimbUK brand centre
A festival crowd, not a slideshow
Things rise into place like someone stepping up onto a stage, cards spring when you touch them, logos drift past. Press play on anything below.
Curves
Five easings
Motion is a confident rise into place: things arrive from below and settle, like stepping up onto a stage. Short, decisive, never bouncy. Respect prefers-reduced-motion: swap movement for a fade at duration.quick.
Your device asks for reduced motion, so the demos below fade instead of moving. That is exactly what the brand does too.
Spring
cubic-bezier(0.34, 1.56, 0.64, 1)
Playful overshoot for hover lifts on cards, stickers and photo tiles, as on the Climb27 homepage. Use with a quick or base duration; never for page-level movement.
Standard
cubic-bezier(0.2, 0, 0, 1)
State changes and things moving within the page.
Exit
cubic-bezier(0.4, 0, 1, 1)
Anything leaving: accelerate away, at about two thirds of the entrance duration.
Linear
linear
Progress, marquees and stage-light drift only.
Durations
Short and decisive
-
Instant
100msColour and opacity feedback: hover, press.
-
Quick
160msSmall UI: buttons, toggles, tooltips, focus rings.
-
Base
240msCards lifting, menus opening, accordions.
-
Slow
400msPanels, modals, section reveals on scroll.
-
Stage
700msHero entrances, title cards and logo reveals in video. The ceiling for any web animation.
Signature moves
Rise, spring, pulse, drift
Rise
Rise
Entrances: from 16px below, on the rise curve.
Hover me
Spring
Cards, photos and stickers lift with a small overshoot when touched or focused.
Live now
Pulse
The live label pulses gently. Nothing else on the page should pulse.
Drift
Logo rows drift in alternate directions on a linear curve. Marquees are decoration, so they stop under reduced motion.
Distances
- Lift
- 4pxCard or button raise on hover.
- Rise
- 16pxElement entering from below on scroll.
- Rise large
- 48pxHero lines and video titles entering from below.
The full motion guide, with the logo sting and video timings, is in Guidelines: Motion.