First, we set up the snapping points

We set the scrolling element to forcibly snap to the Y axis by using scroll-snap-type: y mandatory.

And then we set section as the snapping elements by using scroll-snap-align: start.

Next, we set up the scrolling animation

We track the view() position of the section elements using the named timeline view-timeline: --section;.

We animate the .content children using animation-timeline: --section;.

ARTIFEX LABS
Click to Morph

DSMMD-1 Clinical Framework

First comprehensive clinical diagnostic framework for AI pathologies

30+ disorders | 7 categories | 50 sources

Technical Research

Frameworks, taxonomies, and methodological contributions

60 sources | Ongoing research

Cultural Bridge

20+ years bridging nightlife/hospitality with AI safety research

72 sources | HBO/VICE/Red Bull

Brand Identity

Dark neumorphic design with purple Bauhaus-inspired aesthetics

64 projects | Accessibility-first

Global Influence

Shaping UNESCO policy to industry benchmarks

193 countries | Fortune 500

Awards & Recognition

UN ITU Future Leader | MLCommons standards

$6,000 prize | 113 sources