JavaScript отключён. Код ниже — полный пример.
App.jsx import { useRef } from 'react' ;
import {
follow,
input,
moveInput,
multiply,
spring,
useAnimated,
useAnimatedCSS,
useAnimatedValue,
} from '@kkwaenggwari/animated' ;
import './styles.css' ;
const apps = [
['M' , '#2854ff' ],
['C' , '#8fb0ff' ],
['P' , '#5c7cff' ],
['N' , '#16181d' ],
['S' , '#4a6bff' ],
['T' , '#7d9bff' ],
['F' , '#1a33c7' ],
['V' , '#3d63ff' ],
['K' , '#1f3fd6' ],
['R' , '#1f2937' ],
];
const size = 52 ;
function Icon ({ letter, color, index, count, pointer, presence, magnify } ) {
const center = ((index + 0.5 ) / count) * 2 - 1 ;
const reach = 5 / count;
const proximity = pointer.interpolate ({
inputRange : [center - reach, center, center + reach],
outputRange : [0 , 1 , 0 ],
extrapolate : 'clamp' ,
});
const grow = useAnimatedCSS (multiply (proximity, presence));
const extra = size * (magnify - 1 );
return (
<div
className ="icon"
style ={{
background: color ,
width: `calc (${size }px + ${grow } * ${extra }px )`,
height: `calc (${size }px + ${grow } * ${extra }px )`,
}}
>
{letter}
</div > export default function App ({ count = 8 , magnify = 1.8 , stiffness = 300 , damping = 26 } ) {
const track = useRef (null );
const pointer = useAnimatedValue (0 );
const presence = useAnimatedValue (0 );
useAnimated (
0 ,
() => {
input (track, moveInput ({ x : pointer, relative : true }));
},
[pointer],
);
const smooth = useAnimated (
0 ,
(value ) => {
follow (value, pointer, { stiffness, damping });
},
[pointer, stiffness, damping],
);
const show = (toValue ) => spring (presence, { toValue, stiffness : 260 , damping : 24 }).start ();
return (
<div className ="stage" >
<div
ref ={track}
className ="track"
style ={{ width: count * (size + 10 ) }}
onPointerEnter ={() => show(1)}
onPointerLeave={() => show(0)}
>
<div className ="dock" >
{apps.slice(0, count).map(([letter, color], index) => (
<Icon
key ={letter}
letter ={letter}
color ={color}
index ={index}
count ={count}
pointer ={smooth}
presence ={presence}
magnify ={magnify}
/>
))}
</div >
</div >
<p > Move the pointer along the dock.</p >
</div > 