About
24 credited easing curves, each drawn as a glyph and ridden by a marker through the identical sampled function, so the drawing and the motion cannot disagree. A ghost marker rides the diagonal for lead and lag against linear. Click to copy as CSS, GSAP, or a token.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ease Atlas to your project and fits it to your theme.
Code
How Ease Atlas is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import EaseAtlas from '@/components/ui/ease-atlas'
const settings = {
columns: 4,
duration: 1200,
autoplay: true,
showGhost: true,
showCode: false,
}
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="min-h-screen w-full bg-background p-6 text-foreground md:p-10">
<div className="mx-auto max-w-5xl">
<EaseAtlas columns={s.columns} duration={s.duration} autoplay={s.autoplay} showGhost={s.showGhost} showCode={s.showCode} />
</div>
</div>
)
}
More by Ryan Tseng
View all
Ink Hero
77
Ink Ridges
64
Ink Headline
40
Ink Reveal
20