KQ-1395 · ENTER/STAGE
Enter Stage
A wrapper that brings its direct children on stage in a cascade ranked by where they actually sit, so a grid arrives as one diagonal wave whose gaps open as it lands, all inside the 600 ms budget. Each preset carries its own spring: rise glides up, settle is set down on springs.snap with one overshoot, unfold swings down on a top hinge on springs.glide, and iris opens a clip while the piece drifts up to size; exits run in reverse on the exit ease and never spring. It adds no wrappers and no tab stops of its own — the children stay interactive in their own tab order, and tabbing into waiting content brings it on at once.
KQ-1395 · ENTER/STAGE
Fieldline · Spring line-up
06 seeds
- Sorrel$4.20
- Yarrow$3.80
- Basil$3.40
- Borage$4.60
- Tansy$3.10
- Mallow$4.90
entering · rising · 60 ms gaps, slowing · 16 px
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/enter-stage
Props
- children
- ReactNode
- default —
- What comes on stage. With scope "children" each direct child moves on its own.
- as
- "div" | "section" | "article" | "ul" | "ol" | "header" | "footer" | "main" | "aside" | "nav"
- default "div"
- The element the stage renders — the only node it adds, so a list stays a list.
- preset
- "rise" | "settle" | "unfold" | "iris"
- default "rise"
- How each piece arrives: rises, is set down, swings down on a top hinge, or opens through an iris.
- stagger
- number
- default 60
- Gap between neighbouring pieces, ms; the whole cascade is held to the 600 ms budget.
- distance
- number
- default 16
- How far the pieces travel, px — also the hinge angle of unfold and the zoom of iris.
- scope
- "children" | "self"
- default "children"
- Move each direct child, or the stage as one piece.
- curve
- "decelerate" | "accelerate" | "linear"
- default "decelerate"
- How the delays are spaced through the order: gaps that open as it lands, close up, or stay even.
- origin
- "start" | "center" | "end"
- default "start"
- Where the wave starts; pieces are ranked by where they actually sit, so a grid enters as a diagonal.
- trigger
- "inView" | "mount" | "manual"
- default "inView"
- What starts the entrance.
- show
- boolean
- default —
- False sends the pieces off with the exit choreography; with trigger "manual", true brings them on.
- once
- boolean
- default true
- True: the entrance plays once. False: leaving view plays the exit and coming back plays it again.
- amount
- number
- default 0.2
- Share of the stage that must be visible before an inView entrance starts, 0 to 1.
- delay
- number
- default 0
- Wait before the first piece moves, ms.
- spring
- "flick" | "snap" | "glide" | "drift" | "recoil"
- default —
- Override the preset's spring from the calibration set (rise and unfold glide, settle snaps, iris drifts).
- duration
- number
- default 400
- Length of the tweened parts (opacity, the iris clip), ms.
- exitOrder
- "reverse" | "same"
- default "reverse"
- Order of the exit: last in leaves first, or the entrance order again.
- replayKey
- string | number
- default —
- Change it to play the entrance again from the start.
- onComplete
- (state: "entered" | "exited") => void
- default —
- The entrance has landed, or the exit has finished.
- className
- string
- default —
- Classes for the stage element; lay out the grid or list here. Other HTML attributes (aria-label, id, style) pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | What comes on stage. With scope "children" each direct child moves on its own. |
| as | "div" | "section" | "article" | "ul" | "ol" | "header" | "footer" | "main" | "aside" | "nav" | "div" | The element the stage renders — the only node it adds, so a list stays a list. |
| preset | "rise" | "settle" | "unfold" | "iris" | "rise" | How each piece arrives: rises, is set down, swings down on a top hinge, or opens through an iris. |
| stagger | number | 60 | Gap between neighbouring pieces, ms; the whole cascade is held to the 600 ms budget. |
| distance | number | 16 | How far the pieces travel, px — also the hinge angle of unfold and the zoom of iris. |
| scope | "children" | "self" | "children" | Move each direct child, or the stage as one piece. |
| curve | "decelerate" | "accelerate" | "linear" | "decelerate" | How the delays are spaced through the order: gaps that open as it lands, close up, or stay even. |
| origin | "start" | "center" | "end" | "start" | Where the wave starts; pieces are ranked by where they actually sit, so a grid enters as a diagonal. |
| trigger | "inView" | "mount" | "manual" | "inView" | What starts the entrance. |
| show | boolean | — | False sends the pieces off with the exit choreography; with trigger "manual", true brings them on. |
| once | boolean | true | True: the entrance plays once. False: leaving view plays the exit and coming back plays it again. |
| amount | number | 0.2 | Share of the stage that must be visible before an inView entrance starts, 0 to 1. |
| delay | number | 0 | Wait before the first piece moves, ms. |
| spring | "flick" | "snap" | "glide" | "drift" | "recoil" | — | Override the preset's spring from the calibration set (rise and unfold glide, settle snaps, iris drifts). |
| duration | number | 400 | Length of the tweened parts (opacity, the iris clip), ms. |
| exitOrder | "reverse" | "same" | "reverse" | Order of the exit: last in leaves first, or the entrance order again. |
| replayKey | string | number | — | Change it to play the entrance again from the start. |
| onComplete | (state: "entered" | "exited") => void | — | The entrance has landed, or the exit has finished. |
| className | string | — | Classes for the stage element; lay out the grid or list here. Other HTML attributes (aria-label, id, style) pass through. |