Motion demo // Kinetic layer
Kinetic motion layers advanced transforms on the base system for high-impact effects.
Actuators expose transform parameters as data attributes so developers compose 3D rotations, spring physics and scroll-driven sequences without writing custom keyframes.
GPU accelerated
Spring physics
Declarative API
Act I // Actuator parameters
Parameters exposed as data attributes eliminate per-page keyframe authoring.
Each actuator accepts a transform channel, intensity range and easing token. Combine multiple actuators on one element for compound effects like tilt + scale + shadow.
<!-- rise-3d: view-timeline entry with spring settle --> <article vl-effect="rise-3d" vl-timeline="view" vl-range="entry" vl-speed="normal"> Content </article> <!-- hover-prism: pointer-following 3D rotation --> <div vl-effect="hover-prism"> Card surface </div>
Act II // Reduced-motion safety
Kinetic effects clamp to near-zero when the user or OS prefers reduced motion.
The actuator layer checks prefers-reduced-motion and collapses durations,
disables 3D transforms and removes spring overshoot. Layout and hierarchy stay intact.
Duration → 0.01ms
RotateX → 0
Scale → 1
Overshoot → 0
safety clamp
@media (prefers-reduced-motion: reduce) {
[vl-effect] {
--_vl-duration: 0.01ms;
--_vl-rotate: 0deg;
--_vl-scale: 1;
}
}
Act III // Scroll-driven composition
Combine kinetic actuators with scroll-driven timelines for scroll-linked 3D scenes.
Set vl-timeline="scroll" or vl-timeline="view" alongside any kinetic
actuator. The browser maps scroll position to transform intensity with zero JavaScript.
<!-- scroll-driven 3D depth: actuator + scroll timeline -->
<section
vl-timeline="scroll"
vl-range="entry 0% cover 70%">
<article
vl-effect="depth-push"
vl-scroll="parallax"
vl-speed="slow">
Scroll-linked kinetic element
</article>
</section>
Motion Principles
Zero-JS Motion
Composition rule
Timeline + Actuator = Scene.
One attribute picks the timeline, another picks the effect. The browser does the rest.
Act IV // Applied kinetics
Actuators, safety clamps and scroll composition: the kinetic motion stack.
Expose parameters as attributes, protect users who prefer reduced motion, then compose with scroll-driven timelines for immersive experiences.