Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
shrink-page-menu-demo
Every hull starts on the loft floor, drawn full size in chalk, long before a single plank of larch is steamed, bent and fastened to the frames.
Each plank is spiled by hand, every seam caulked with cotton and pitch, every bronze fastening countersunk and plugged, so the topsides read as one unbroken sheen of varnish the day she meets the water.
From lofted lines to a finished boat riding her mooring at dusk, the yard is where sheer, stance and balance resolve into a shape that sails.
A wooden boat is only ever as honest as the hands that built her, plank by plank, season after season, with nothing hidden under paint.
import { ShrinkPageMenu } from "@/registry/tween/shrink-page-menu"
export function ShrinkPageMenuDemo() {
return (
<div className="w-full">
<ShrinkPageMenu />
</div>
)
}
Installation
Usage
import { ShrinkPageMenu } from "@/components/ui/shrink-page-menu"<ShrinkPageMenu
logo="Ostrand Yard"
links={[{ label: "Hulls" }, { label: "Refits" }, { label: "Charter" }]}
secondaryLinks={[{ label: "Visit" }, { label: "Privacy" }]}
content={[
{
type: "text",
text: "Every hull starts on the loft floor, drawn in chalk.",
},
{
type: "image",
src: "https://images.unsplash.com/photo-1567703956367-a0ec1fcb883e?q=80&w=1920&h=1080&fit=crop&crop=center&auto=format",
alt: "Varnished planking along a wooden hull",
},
]}
/>How it works
- The page is its own scroll container layered on top of the menu. Opening the menu animates its
clip-pathfrom the full rectangle to a single point at the centre while it scales to0.5, so the page collapses inward. - The menu content starts at
z: 350inside aperspective: 1000pxparent, blurred and transparent. It moves back toz: 0, un-blurs and fades in, starting 0.2s after the page begins to shrink. - Every link is rendered twice, an original and a clone stacked below it. SplitText splits both into characters; on hover the original and clone characters are interleaved and rolled up together with a 0.2s stagger, and roll back from the end on leave.
- Everything is absolute inside the component, so it works in any container. Below a 1000px container width the secondary links stack and the side footer texts hide.
- With
prefers-reduced-motion: reducethe menu jumps straight open or closed and the hover roll is off.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | string | "Ostrand Yard" | Wordmark top-left. |
links | ShrinkPageMenuLink[] | 3 links | Large serif links. Each is { label, href? }. |
secondaryLinks | ShrinkPageMenuLink[] | 3 links | Small serif links under the main ones. |
footer | object | default texts | { left?, centerCaption?, centerMark?, right? }. |
content | ShrinkPageMenuBlock[] | 4 texts, 2 images | Page blocks: { type: "text", text } or { type: "image", src, alt? }. |
menuColor | string | "#102a3c" | Menu background color. |
pageColor | string | "#12100e" | Page background color. |
className | string | — | Extra classes on the outer container. |