Phase I
Warped Typography
Letters jitter in from the void, trailing like particles in a gravity well. We split text into characters and scrub a timeline with ScrollTrigger. If GSAP's SplitText is available, the demo uses it; otherwise it falls back to a light custom splitter.
Phase II
Chrono‑Portal Reveal
We animate a circular clip-path as if a portal expands to reveal this timeline. Try scrolling up to watch it rewind.
Phase III
Temporal Distortion
SVG Displacement: We modulate feTurbulence and feDisplacementMap for a heat‑haze warp when the section enters. This is short and dramatic; adjust scale for intensity.
Stability: Effects are bursty and brief to stay performant on mobile. All animations are transform/opacity where possible.
Phase IV
Glitch Transitions
On section enter/leave we trigger a quick glitch: micro translations, channel splits, and a fast opacity flicker using keyframes with repeatRefresh: true.
Phase V
Rewind the Timeline
Everything is scrubbed. Scroll back upward and the rift closes, text un‑warps, and distortions unwind — a natural consequence of scrub: true timelines.