App.jsximport { 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>
);
}
