Motion Library · v1.0
Three motion profiles, one considered system.
Adapted from the GHT Lumina prototype. Each profile defines a duration, easing curve, and interaction posture — applied uniformly to images, headings, and body copy so the whole page breathes with a single character.
Selecting a profile updates the live demo below.
Motion System 01 · Linear · Silent
Minimal Gallery
Ghostly opacity fades and crisp clip-path mask reveals. No aggressive movement — invisible and architectural.
- Duration
- 1200ms
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Hover scale
- —
- Scroll drift
- —
Image transitions
Field · dawn
4 : 5
Forest · silence
4 : 5
Shoreline · dusk
4 : 5Text block transitions
Voice · Editorial
A quiet room, patiently kept.
The frame recedes so the subject can lead. Rhythm carries the reader from one clause to the next without asking for attention.
Cadence · Body
Every line arrives on its own beat.
Reveal, delay, and settle. Small offsets between title and paragraph give the eye a natural place to land before continuing.
Scroll to re-trigger · viewport margin -10%
Full catalogue
All three systems, side by side.
Scroll through each section to feel the difference in duration, easing, and ambient behaviour.
Motion System 01 · Linear · Silent
Minimal Gallery
Ghostly opacity fades and crisp clip-path mask reveals. No aggressive movement — invisible and architectural.
- Duration
- 1200ms
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Hover scale
- —
- Scroll drift
- —
Image transitions
Field · dawn
4 : 5Forest · silence
4 : 5Shoreline · dusk
4 : 5Text block transitions
Voice · Editorial
A quiet room, patiently kept.
The frame recedes so the subject can lead. Rhythm carries the reader from one clause to the next without asking for attention.
Cadence · Body
Every line arrives on its own beat.
Reveal, delay, and settle. Small offsets between title and paragraph give the eye a natural place to land before continuing.
Scroll to re-trigger · viewport margin -10%
Motion System 02 · Snappy Easing
Fluid Premium
Micro-interactions on a custom cubic-bezier(0.16, 1, 0.3, 1). Organic image scaling and smooth color transitions on hover.
- Duration
- 700ms
- Easing
- cubic-bezier(0.16, 1, 0.3, 1)
- Hover scale
- ×1.03
- Scroll drift
- 24px
Image transitions
Field · dawn
4 : 5Forest · silence
4 : 5Shoreline · dusk
4 : 5Text block transitions
Voice · Editorial
A quiet room, patiently kept.
The frame recedes so the subject can lead. Rhythm carries the reader from one clause to the next without asking for attention.
Cadence · Body
Every line arrives on its own beat.
Reveal, delay, and settle. Small offsets between title and paragraph give the eye a natural place to land before continuing.
Scroll to re-trigger · viewport margin -10%
Motion System 03 · Scroll-Driven
Atmospheric Shift
Elements drift up as they enter the viewport — like a motorized shade lifting — while ambient lighting shifts from cool day to warm golden hour.
- Duration
- 1000ms
- Easing
- cubic-bezier(0.22, 0.61, 0.36, 1)
- Hover scale
- ×1.01
- Scroll drift
- 80px
Image transitions
Field · dawn
4 : 5Forest · silence
4 : 5Shoreline · dusk
4 : 5Text block transitions
Voice · Editorial
A quiet room, patiently kept.
The frame recedes so the subject can lead. Rhythm carries the reader from one clause to the next without asking for attention.
Cadence · Body
Every line arrives on its own beat.
Reveal, delay, and settle. Small offsets between title and paragraph give the eye a natural place to land before continuing.
Scroll to re-trigger · viewport margin -10%