Docs · llms-first
Drop the txt. Your AI sets it up.
Setup and per-transition docs live in plain-text files. Hand the link to Claude Code, Cursor, or any AI agent — it has everything it needs.
Install.
Transitions.
Each links to a self-contained .txt.
- drilliOS-style hierarchical navigation.
- fadeCalm cross-fade. Safe default.
- slideHorizontal push.
- scrollVertical page scroll.
- sheetBottom sheet, slides up.
- heroShared element. data-hero-key.
- zoomCard expands to detail. data-zoom-*-key.
- strip3D Y-axis flip.
- blindWindow-blinds wipe.
- filmCinematic shrink + tile.
- rotateCard flip.
- jaeminPlayful rotated zoom.
For setup & debugging
Layout. Three classes on the wrapper.
The element that wraps <Ssgoi> needs these classes. The AI agent reads this from /llms.txt — this section is for you, when something looks off.
<main className="overflow-y-auto relative z-0 overflow-x-clip h-dvh">
<Ssgoi config={config}>{children}</Ssgoi>
</main>relativeThe outgoing page is cloned with position: absolute — it needs a positioned ancestor or it jumps.z-0Creates a stacking context so the OUT page doesn't fall behind backgrounds.overflow-x-clipPrevents horizontal scrollbar flashes during slide / drill / strip.
How it works. Clone & absolute.
When a route changes, the old page would normally unmount and vanish. SSGOI clones it back into the DOM with position: absolute so the OUT animation can play while the new page mounts in place.
- User navigates — framework unmounts the old page.
- SSGOI clones the leaving page and re-inserts it with position: absolute (OUT).
- The new page mounts at its natural place (IN).
- OUT and IN animate at the same time.
- The cloned OUT page is removed when its animation ends.
That clone is why the wrapper needs relative z-0 — without a positioned, stacking-context ancestor, the absolute-positioned OUT page either jumps to the wrong spot or falls behind the background. If a transition looks broken, check the wrapper first.