App.jsximport { useRef } from 'react';
import { input, scrollInput, useAnimated, useAnimatedCSS } from '@kkwaenggwari/animated';
import './styles.css';
const chapters = ['Dawn', 'Climb', 'Summit'];
export default function App({ depth = 1 }) {
const scroller = useRef(null);
const progress = useAnimated(
0,
(value) => {
input(scroller, scrollInput({ progressY: value }));
},
[],
);
const move = (distance) =>
progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', `${distance * depth}px`] });
const sky = useAnimatedCSS(
progress.interpolate({
inputRange: [0, 0.5, 1],
outputRange: ['#5c7cff', '#8fb0ff', '#0b1440'],
}),
);
return (
<div className="stage">
<div ref={scroller} className="scroller">
<div className="scene" style={{ background: sky }}>
<span className="sun" style={{ transform: `translateY(${move(-150)})` }} />
<span className="hill far" style={{ transform: `translateY(${move(-50)})` }} />
<span className="hill near" style={{ transform: `translateY(${move(-110)})` }} />
{chapters.map((chapter, index) => {
const at = index / (chapters.length - 1);
const opacity = progress.interpolate({
inputRange: [at - 0.3, at, at + 0.3],
outputRange: [0, 1, 0],
extrapolate: 'clamp',
});
return (
<h3 key={chapter} style={{ opacity }}>
{chapter}
</h3>
);
})}
</div>
<div className="spacer" />
</div>
<p>Scroll inside the frame.</p>
</div>
);
}
