Examples HTML and CSS, with JavaScript where noted. Each one also comes written fully in JavaScript.
tilt depth parallax magnetic repel follow look point near hover press view scroll drag signals
New
Depth, not decoration
Each layer sits at its own height above the card.
CSS HTML
Motion in CSS JavaScript
Copy
.tilt-scene {
display : grid ;
place-items : center ;
height : 100% ;
}
.tilt-card {
--k-tilt : 14deg ;
--k-motion : soft ;
width : min ( 300px , 80% ) ;
padding : 28px ;
border-radius : 22px ;
background : linear-gradient ( 140deg , #2f6bff , #7c5cff ) ;
color : #fff ;
box-shadow : 0 40px 60px -30px rgb ( 47 107 255 / 0.7 ) ;
}
.tilt-card__badge {
--k-depth : 70px ;
display : inline-block ;
padding : 3px 10px ;
border-radius : 999px ;
background : #fff ;
color : #2f6bff ;
font-size : 12px ;
font-weight : 700 ;
}
.tilt-card h3 {
--k-depth : 45px ;
margin : 16px 0 6px ;
font-size : 26px ;
line-height : 1.1 ;
}
.tilt-card p {
--k-depth : 25px ;
margin : 0 ;
font-size : 15px ;
color : rgb ( 255 255 255 / 0.85 ) ;
} Copy
< div class = "tilt-scene" data-kinesis >
< article class = "tilt-card" >
< span class = "tilt-card__badge" > New< / span >
< h3 > Depth, not decoration< / h3 >
< p > Each layer sits at its own height above the card.< / p >
< / article >
< / div > Tilt card with depth Turns toward the pointer. Its contents float at different heights. CSS HTML
Motion in CSS JavaScript
Copy
.magnet-scene {
display : grid ;
place-items : center ;
height : 100% ;
}
.magnet {
--k-magnetic : 0.35 ;
--k-radius : 160px ;
--k-when : press ;
--k-scale : 0.94 ;
--k-motion : bouncy ;
padding : 18px 34px ;
border : 0 ;
border-radius : 999px ;
background : #0c1324 ;
color : #fff ;
font-size : 16px ;
font-weight : 600 ;
cursor : pointer ;
}
.magnet span {
--k-magnetic : 0.15 ;
--k-radius : 160px ;
display : inline-block ;
} Copy
< div class = "magnet-scene" data-kinesis >
< button class = "magnet" >
< span > Get started< / span >
< / button >
< / div > Magnetic button Leans toward the pointer and squishes when pressed. The label moves less than the button. CSS HTML
Motion in CSS JavaScript
Copy
.dock-scene {
display : grid ;
place-items : end center ;
height : 100% ;
padding-bottom : 36px ;
}
.dock {
display : flex ;
gap : 8px ;
padding : 8px ;
border-radius : 22px ;
background : rgb ( 255 255 255 / 0.7 ) ;
box-shadow : 0 20px 40px -20px rgb ( 12 19 36 / 0.35 ) ;
}
.dock__icon {
--k-when : near ;
--k-axis : x ;
--k-radius : 120px ;
--k-scale : 1.65 ;
--k-y : -14px ;
--k-motion : snappy ;
width : 40px ;
height : 40px ;
border-radius : 12px ;
background : linear-gradient ( 145deg , hsl ( var ( --hue ) 90% 66% ) , hsl ( calc ( var ( --hue ) + 40 ) 85% 52% ) ) ;
transform-origin : 50% 100% ;
} Copy
< div class = "dock-scene" data-kinesis >
< nav class = "dock" >
< a class = "dock__icon" style = "--hue: 215" > < / a >
< a class = "dock__icon" style = "--hue: 260" > < / a >
< a class = "dock__icon" style = "--hue: 330" > < / a >
< a class = "dock__icon" style = "--hue: 20" > < / a >
< a class = "dock__icon" style = "--hue: 45" > < / a >
< a class = "dock__icon" style = "--hue: 150" > < / a >
< a class = "dock__icon" style = "--hue: 185" > < / a >
< / nav >
< / div > Dock Icons grow and rise under the pointer. A near reaction with --k-scale and --k-y.
Fast Nothing runs while nothing moves.
Yours Your transforms stay untouched.
Small About 14 KB, gzipped.
CSS HTML
Motion in CSS JavaScript
Copy
.spotlight {
display : grid ;
grid-template-columns : repeat ( auto-fit , minmax ( 150px , 1fr ) ) ;
gap : 14px ;
align-content : center ;
height : 100% ;
padding : 28px ;
}
.spot-card {
--k-track : pointer ;
--k-when : hover ;
padding : 22px ;
border-radius : 18px ;
border : 1px solid rgb ( 255 255 255 / calc ( 0.08 + var ( --k-progress ) * 0.25 ) ) ;
background :
radial-gradient (
260px circle at calc ( var ( --k-pointer-x ) * 100% ) calc ( var ( --k-pointer-y ) * 100% ) ,
rgb ( 120 160 255 / calc ( var ( --k-progress ) * 0.35 ) ) ,
transparent 65%
) ,
#0c1324 ;
color : #eef2ff ;
}
.spot-card h3 {
margin : 0 0 6px ;
font-size : 18px ;
}
.spot-card p {
margin : 0 ;
color : #a3aec8 ;
font-size : 14px ;
} Copy
< div class = "spotlight" data-kinesis >
< article class = "spot-card" > < h3 > Fast< / h3 > < p > Nothing runs while nothing moves.< / p > < / article >
< article class = "spot-card" > < h3 > Yours< / h3 > < p > Your transforms stay untouched.< / p > < / article >
< article class = "spot-card" > < h3 > Small< / h3 > < p > About 14 KB, gzipped.< / p > < / article >
< / div > Spotlight cards A glow follows the pointer. Kinesis writes its position, a CSS gradient draws the light. CSS HTML
Motion in CSS JavaScript
Copy
.layers {
--k-motion : soft ;
position : relative ;
height : 100% ;
overflow : hidden ;
background : linear-gradient ( #bcd4ff , #f1f5ff ) ;
}
.layers > * {
position : absolute ;
}
.layers__sun {
--k-parallax : -12px ;
top : 40px ;
right : 18% ;
width : 90px ;
height : 90px ;
border-radius : 50% ;
background : #ffcf5a ;
}
.layers__far {
--k-parallax : 18px 6px ;
inset : auto -10% 40px -10% ;
height : 150px ;
border-radius : 50% 50% 0 0 / 100% 100% 0 0 ;
background : #8fb0f7 ;
}
.layers__near {
--k-parallax : 44px 12px ;
inset : auto -15% -30px -15% ;
height : 130px ;
border-radius : 45% 55% 0 0 / 100% 100% 0 0 ;
background : #3d6fe0 ;
}
.layers__title {
--k-parallax : -26px -10px ;
inset : 34% 0 auto 0 ;
margin : 0 ;
text-align : center ;
font-size : 34px ;
letter-spacing : -0.02em ;
color : #0c1324 ;
} Copy
< div class = "layers" data-kinesis >
< div class = "layers__sun" > < / div >
< div class = "layers__far" > < / div >
< div class = "layers__near" > < / div >
< h3 class = "layers__title" > Somewhere quiet< / h3 >
< / div > Parallax layers Each layer drifts by a different amount, which creates depth. CSS HTML
Motion in CSS JavaScript
Copy
.eyes {
display : flex ;
gap : 18px ;
justify-content : center ;
align-items : center ;
height : 100% ;
}
.eyes__eye {
display : grid ;
place-items : center ;
width : 100px ;
height : 100px ;
border-radius : 50% ;
background : #fff ;
box-shadow : inset 0 -6px 0 rgb ( 0 0 0 / 0.07 ) , 0 12px 30px -12px rgb ( 12 19 36 / 0.35 ) ;
}
.eyes__pupil {
--k-follow : 1 ;
--k-limit : 22px ;
--k-area : viewport ;
--k-motion : snappy ;
display : block ;
width : 38px ;
height : 38px ;
border-radius : 50% ;
background : #0c1324 ;
} Copy
< div class = "eyes" data-kinesis >
< div class = "eyes__eye" > < span class = "eyes__pupil" > < / span > < / div >
< div class = "eyes__eye" > < span class = "eyes__pupil" > < / span > < / div >
< / div > Eyes that follow Pupils follow the pointer anywhere on the page, at most 22px from center. CSS HTML
Motion in CSS JavaScript
Copy
.heads {
display : flex ;
gap : 28px ;
justify-content : center ;
align-items : center ;
height : 100% ;
}
.heads__head {
--k-look : 35deg ;
--k-radius : 320px ;
--k-motion : soft ;
display : flex ;
gap : 16px ;
justify-content : center ;
align-items : center ;
width : 104px ;
height : 104px ;
border-radius : 30px ;
background : linear-gradient ( 160deg , #ffd166 , #ff9f43 ) ;
}
.heads__head span {
--k-depth : 24px ;
width : 12px ;
height : 18px ;
border-radius : 6px ;
background : #0c1324 ;
} Copy
< div class = "heads" data-kinesis >
< div class = "heads__head" > < span > < / span > < span > < / span > < / div >
< div class = "heads__head" > < span > < / span > < span > < / span > < / div >
< div class = "heads__head" > < span > < / span > < span > < / span > < / div >
< / div > Heads that turn Heads turn to face the pointer in 3D. The eyes sit in front of the face. CSS HTML
Motion in CSS JavaScript
Copy
.needles {
display : grid ;
grid-template-columns : repeat ( 8 , 1fr ) ;
gap : 18px ;
place-items : center ;
height : 100% ;
padding : 36px ;
}
.needles__needle {
--k-point : 0deg ;
--k-motion : bouncy ;
width : 6px ;
height : 36px ;
border-radius : 3px ;
background : linear-gradient ( #2f6bff 50% , #c7d3ee 50% ) ;
} Copy
< div class = "needles" data-kinesis >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< span class = "needles__needle" > < / span >
< / div > Arrows that point Every needle points at the pointer and turns the short way. CSS HTML
Motion in CSS JavaScript
Copy
.gears {
--k-motion : snappy ;
position : relative ;
height : 100% ;
}
.gear {
position : absolute ;
left : calc ( 50% + var ( --x ) - var ( --r ) - 5px ) ;
top : calc ( 50% + var ( --y ) - var ( --r ) - 5px ) ;
width : calc ( var ( --r ) * 2 + 10px ) ;
height : calc ( var ( --r ) * 2 + 10px ) ;
border-radius : 50% ;
background :
radial-gradient ( circle closest-side , #fff 0 22% , rgb ( 0 0 0 / 0.2 ) 23% 28% , transparent 29% ) ,
var ( --gear ) ;
mask :
radial-gradient ( circle closest-side , #000 calc ( 100% - 10px ) , transparent calc ( 100% - 9.5px ) ) ,
repeating-conic-gradient ( from var ( --phase ) , #000 0 calc ( 150deg / var ( --n ) ) , transparent 0 calc ( 360deg / var ( --n ) ) ) ;
}
.gear--large {
--k-spin : 180deg ;
--gear : #1f2a44 ;
--r : 80px ;
--n : 32 ;
--phase : 6.41deg ;
--x : -71.2px ;
--y : 12.5px ;
}
.gear--medium {
--k-spin : -288deg ;
--gear : #2f6bff ;
--r : 50px ;
--n : 20 ;
--phase : 16.25deg ;
--x : 46.6px ;
--y : -42.5px ;
}
.gear--small {
--k-spin : 411.43deg ;
--gear : #ff5d6c ;
--r : 35px ;
--n : 14 ;
--phase : 25.36deg ;
--x : 116.2px ;
--y : 6.3px ;
} Copy
< div class = "gears" data-kinesis >
< span class = "gear gear--large" > < / span >
< span class = "gear gear--medium" > < / span >
< span class = "gear gear--small" > < / span >
< / div > Gear train Three meshed gears turn with the pointer. Spin values follow the gear ratio, so the teeth stay interlocked. CSS HTML
Motion in CSS JavaScript
Copy
.dots {
display : grid ;
grid-template-columns : repeat ( 16 , 1fr ) ;
place-items : center ;
height : 100% ;
padding : 28px ;
}
.dots i {
--k-repel : 26px ;
--k-radius : 110px ;
--k-when : near ;
--k-scale : 1.8 ;
--k-background : #2f6bff ;
display : block ;
width : 8px ;
height : 8px ;
border-radius : 50% ;
background : #b4bfd6 ;
} Copy
< div class = "dots" data-kinesis >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< i > < / i >
< / div > Repel field 96 dots move away from the pointer, grow, and turn blue. One CSS rule. CSS HTML
Motion in CSS JavaScript
Copy
.presses {
display : flex ;
flex-wrap : wrap ;
gap : 14px ;
justify-content : center ;
align-items : center ;
height : 100% ;
}
.press {
--k-when : press ;
--k-motion : bouncy ;
padding : 14px 26px ;
border : 0 ;
border-radius : 14px ;
background : #0c1324 ;
color : #fff ;
font-size : 15px ;
font-weight : 600 ;
cursor : pointer ;
}
.press--squish {
--k-scale : 0.88 ;
}
.press--sink {
--k-y : 5px ;
box-shadow : 0 calc ( ( 1 - var ( --k-progress ) ) * 5px ) 0 #2f6bff ;
}
.press--glow {
--k-scale : 0.97 ;
--k-background : #2f6bff ;
} Copy
< div class = "presses" data-kinesis >
< button class = "press press--squish" > Squish< / button >
< button class = "press press--sink" > Sink< / button >
< button class = "press press--glow" > Glow< / button >
< / div > Pressable buttons Three press styles. The second animates its shadow with --k-progress. CSS HTML
Motion in CSS JavaScript
Copy
.reveal {
display : grid ;
gap : 10px ;
align-content : center ;
height : 100% ;
padding : 28px ;
}
.reveal__item {
--k-when : view once ;
--k-opacity : 0 1 ;
--k-y : 28px 0 ;
--k-stagger : 90ms ;
--k-motion : soft ;
display : flex ;
gap : 14px ;
align-items : center ;
padding : 14px 16px ;
border-radius : 14px ;
background : #fff ;
box-shadow : 0 8px 24px -16px rgb ( 12 19 36 / 0.4 ) ;
}
.reveal__item b {
width : 28px ;
height : 28px ;
border-radius : 8px ;
background : var ( --c ) ;
}
.reveal__item span {
flex : 1 ;
height : 10px ;
border-radius : 5px ;
background : #e3e8f2 ;
} Copy
< div class = "reveal" data-kinesis >
< div class = "reveal__item" > < b style = "--c: #2f6bff" > < / b > < span > < / span > < / div >
< div class = "reveal__item" > < b style = "--c: #7c5cff" > < / b > < span > < / span > < / div >
< div class = "reveal__item" > < b style = "--c: #ff5d6c" > < / b > < span > < / span > < / div >
< div class = "reveal__item" > < b style = "--c: #16c784" > < / b > < span > < / span > < / div >
< / div > Reveal on scroll Items fade in and rise, one after another, as they enter the viewport. CSS HTML
Motion in CSS JavaScript
Copy
.scrolly {
display : grid ;
place-items : center ;
height : 100% ;
}
.scrolly__bar {
--k-when : page ;
--k-motion : instant ;
position : absolute ;
inset : 0 0 auto 0 ;
height : 6px ;
background : #2f6bff ;
scale : var ( --k-progress ) 1 ;
transform-origin : left ;
}
.scrolly__tile {
--k-when : scroll ;
--k-rotate : -120deg 120deg ;
--k-scale : 0.7 1.15 ;
width : 120px ;
height : 120px ;
border-radius : 30px ;
background : conic-gradient ( from 45deg , #2f6bff , #7c5cff , #ff5d6c , #2f6bff ) ;
} Copy
< div class = "scrolly" data-kinesis >
< div class = "scrolly__bar" > < / div >
< div class = "scrolly__tile" > < / div >
< / div > Scroll-linked motion A reading-progress bar follows the page. The tile turns as it crosses the screen. CSS HTML
Motion in CSS JavaScript
Copy
.route {
--k-when : scroll ;
position : relative ;
width : 400px ;
max-width : 100% ;
height : 220px ;
margin : 70px auto ;
}
.route__line {
position : absolute ;
inset : 0 ;
fill : none ;
stroke : #c7d3ee ;
stroke-width : 3 ;
stroke-dasharray : 6 8 ;
}
.route__dot {
position : absolute ;
top : 0 ;
left : 0 ;
width : 26px ;
height : 26px ;
border-radius : 50% ;
background : #ff5d6c ;
offset-path : path ( "M 20 180 C 110 20, 290 20, 380 180" ) ;
offset-distance : calc ( var ( --k-progress ) * 100% ) ;
} Copy
< div class = "route-scene" data-kinesis >
< div class = "route" >
< svg class = "route__line" viewBox = "0 0 400 220" aria-hidden = "true" >
< path d = "M 20 180 C 110 20, 290 20, 380 180" / >
< / svg >
< span class = "route__dot" > < / span >
< / div >
< / div > Along a path Scroll progress moves a dot along a CSS offset-path. CSS HTML
Motion in CSS JavaScript
Copy
.drag-zone {
position : relative ;
height : 100% ;
}
.drag-card {
--k-drag : both ;
position : absolute ;
top : calc ( 50% - 60px ) ;
display : grid ;
place-items : center ;
width : 120px ;
height : 120px ;
border-radius : 22px ;
color : #fff ;
font-weight : 600 ;
cursor : grab ;
user-select : none ;
}
.drag-card [ data-kinesis-dragging ] {
cursor : grabbing ;
}
.drag-card--return {
--k-release : return ;
--k-motion : bouncy ;
left : calc ( 30% - 60px ) ;
background : #ff5d6c ;
}
.drag-card--throw {
--k-release : throw ;
--k-bounds : parent ;
left : calc ( 70% - 60px ) ;
background : #2f6bff ;
} Copy
< div class = "drag-zone" data-kinesis >
< div class = "drag-card drag-card--return" > Pull me< / div >
< div class = "drag-card drag-card--throw" > Throw me< / div >
< / div > Drag, throw, snap back One card springs home. The other can be thrown and stops inside its box. CSS HTML
Motion in CSS JavaScript
Copy
.cursorbox {
position : relative ;
height : 100% ;
cursor : none ;
}
.cursorbox span {
--k-follow : 1 ;
position : absolute ;
top : 50% ;
left : 50% ;
translate : -50% -50% ;
border-radius : 50% ;
pointer-events : none ;
}
.cursorbox__dot {
--k-motion : instant ;
width : 10px ;
height : 10px ;
background : #2f6bff ;
}
.cursorbox__ring {
--k-motion : soft ;
width : 46px ;
height : 46px ;
border : 2px solid #2f6bff ;
} Copy
< div class = "cursorbox" data-kinesis >
< span class = "cursorbox__ring" > < / span >
< span class = "cursorbox__dot" > < / span >
< / div > Custom cursor A dot follows the pointer exactly and a ring follows it softly. CSS HTML JS
Motion in CSS JavaScript
Copy
.headline-scene {
display : grid ;
place-items : center ;
height : 100% ;
}
.headline {
margin : 0 ;
font-size : clamp ( 34px , 6vw , 60px ) ;
letter-spacing : -0.03em ;
}
.headline .k-char {
--k-when : view once ;
--k-opacity : 0 1 ;
--k-y : 0.5em 0 ;
--k-rotate : 14deg 0deg ;
--k-stagger : 35ms ;
--k-motion : bouncy ;
} Copy
< div class = "headline-scene" data-kinesis >
< h2 class = "headline" data-k-split = "chars" > Motion, declared.< / h2 >
< / div > Copy
import { splitAll } from "@amineyarman/kinesis/text"
const root = document . querySelector ( "[data-kinesis]" )
splitAll ( root ) Text reveal Characters appear one after another. Screen readers still read the heading as written. Copy
.speaker-scene {
display : grid ;
gap : 18px ;
place-items : center ;
align-content : center ;
height : 100% ;
}
.speaker {
display : grid ;
place-items : center ;
width : 150px ;
height : 190px ;
border-radius : 22px ;
background : #0c1324 ;
}
.speaker__cone {
width : 100px ;
height : 100px ;
border-radius : 50% ;
background : radial-gradient ( circle , #5b8cff 0 18% , #1b2744 20% 55% , #2c3a60 58% ) ;
} Copy
< div class = "speaker-scene" data-kinesis >
< div class = "speaker" > < span class = "speaker__cone" > < / span > < / div >
< audio src = "/media/beat.wav" controls loop > < / audio >
< / div > Copy
import { kinesis } from "@amineyarman/kinesis"
import { createAudio } from "@amineyarman/kinesis/audio"
const root = document . querySelector ( "[data-kinesis]" )
const audio = createAudio ( root . querySelector ( "audio" ) )
kinesis ( root . querySelector ( ".speaker__cone" ) ) . bind ( {
scale : audio . bass . map ( [ 0.78 , 0.95 ] , [ 1 , 1.3 ] ) ,
} )
kinesis ( root . querySelector ( ".speaker" ) ) . bind ( {
rotate : audio . treble . map ( [ 0.15 , 0.32 ] , [ 0 , 4 ] ) . spring ( "bouncy" ) ,
} ) Audio-reactive speaker Bass moves the cone and treble shakes the cabinet. Copy
.gauge-scene {
display : grid ;
place-items : center ;
height : 100% ;
}
.gauge {
position : relative ;
width : 220px ;
height : 120px ;
overflow : hidden ;
border-radius : 120px 120px 0 0 ;
background : conic-gradient ( from -90deg at 50% 100% , #16c784 , #ffb020 , #ff5d6c 180deg , transparent 0 ) ;
}
.gauge__needle {
position : absolute ;
bottom : 0 ;
left : calc ( 50% - 3px ) ;
width : 6px ;
height : 100px ;
border-radius : 3px ;
background : #0c1324 ;
transform-origin : 50% 100% ;
} Copy
< div class = "gauge-scene" data-kinesis >
< div class = "gauge" > < span class = "gauge__needle" > < / span > < / div >
< / div > Copy
import { kinesis , pointer } from "@amineyarman/kinesis"
const root = document . querySelector ( "[data-kinesis]" )
kinesis ( root . querySelector ( ".gauge__needle" ) ) . bind ( {
rotate : pointer . speed . map ( [ 0 , 4000 ] , [ - 90 , 90 ] ) . spring ( "bouncy" ) ,
} ) Speed as a signal The needle shows pointer speed, mapped to an angle and smoothed with a spring.