Components / Animations / Liquid Transition

Liquid Transition

Content changes behind a fluid front. No-slip walls make the middle of the front lead the edges by a Poiseuille parabola that grows with speed, and the edge rings under tension by the damped wave equation, ∂²h/∂t² = (σ/μ)·∂²h/∂x² − γ·∂h/∂t, plucked by the sweep’s own acceleration. So the wobble quickens as √σ and a wider box sloshes slower. The new content goes in at full cover; droplets trail the drain.

Usage

import LiquidTransition from '@/components/liquid-transition'

<LiquidTransition transitionKey={route}>
  {page}
</LiquidTransition>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/liquid-transition.json

Model

∂²h/∂t² = (σ/μ)·∂²h/∂x² − γ·∂h/∂t

the edge ringing under tension, free at both walls

Props

Property	Type	Default	Description
`transitionKey`	`string \| number`	—	Changing this starts a transition. The new children are swapped in at full cover. Changed again mid-sweep, the fluid carries on or turns back from where it is and swaps in whatever is newest; changed back to the key still on show, it backs out.
`direction`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	The way the front travels.
`color`	`string`	`'#e8e4dc'`	The fluid's colour. Any CSS colour.
`duration`	`number`	`1100`	Cover and drain together, ms. Held to at least 200; anything that is not a finite number falls back to 1100.
`tension`	`number`	`1`	Surface tension. The edge's wobble frequency goes as its square root.
`lead`	`number`	`1`	How far the middle of the front outruns the walls. 0 is a flat front.
`droplets`	`number`	`1`	How many droplets break off the draining edge, to a length of it: a wider edge sheds more. 0 for none.
`onCovered`	`() => void`	—	Called at full cover, as the content swaps. Not called for a sweep that backs out without swapping.
`onComplete`	`() => void`	—	Called once the fluid has gone and the last droplet has dried.
`children`	`ReactNode`	—	What is showing for the current `transitionKey`. New children go in at full cover.