App.jsximport { useState } from 'react';
import { Animated } from '@kkwaenggwari/animated';
import './styles.css';
const places = [
{
id: 'dune',
title: 'Dune',
color: '#2854ff',
text: 'Wind moves the ridge a little every night.',
},
{ id: 'reef', title: 'Reef', color: '#5c7cff', text: 'Clear water over a shallow shelf.' },
{ id: 'aurora', title: 'Aurora', color: '#8fb0ff', text: 'Curtains of light above the fjord.' },
{
id: 'basalt',
title: 'Basalt',
color: '#16181d',
text: 'Columns cooled from an old lava flow.',
},
{
id: 'lagoon',
title: 'Lagoon',
color: '#7d9bff',
text: 'A calm bay behind the barrier island.',
},
{ id: 'violet', title: 'Violet', color: '#4a6bff', text: 'A valley of wild lupins in June.' },
];
export default function App({ columns = 3, stiffness = 280, damping = 28 }) {
const [openId, setOpenId] = useState(null);
const open = places.find((place) => place.id === openId);
return (
<Animated.Scene tempo={{ spring: { stiffness, damping } }}>
<div className="stage">
<div className="grid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
{places.map((place) => (
<button
key={place.id}
type="button"
className="tile"
onClick={() => setOpenId(place.id)}
>
{/* The same move id as the cover: the tile keeps its place while the cover is shown. */}
<Animated.div
move={place.id}
className="swatch"
style={{ background: place.color }}
/>
<span>{place.title}</span>
</button>
))}
</div>
<Animated.Keep>
{open && (
<div key={open.id} className="detail">
<Animated.div
className="sheet"
seed={{ opacity: 0 }}
pose={{ opacity: 1 }}
depart={{ opacity: 0 }}
/>
<Animated.div move={open.id} className="cover" style={{ background: open.color }} />
<Animated.div
className="copy"
seed={{ opacity: 0, transform: [{ translateY: 12 }] }}
pose={{ opacity: 1, transform: [{ translateY: 0 }] }}
depart={{ opacity: 0 }}
>
<h2>{open.title}</h2>
<p>{open.text}</p>
<button type="button" onClick={() => setOpenId(null)}>
Close
</button>
</Animated.div>
</div>
)}
</Animated.Keep>
</div>
</Animated.Scene>
);
}
