Name: 23rd
Author: radiumcoders (Jay)

Preview

Scroll past the end of this card, or play the rubber-band from here.

Tip: keep scrolling after you hit the bottom.

Props

Palette

Stretch220

Columns9

Blur16

Glow0

Snap380

Flip

Tall edges, dipped middle

Rotate 180°

Aurora hangs from the page

Installation

pnpm dlx shadcn@latest add @23rd/stretchy-footer

Or from the public GitHub registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/stretchy-footer

Usage

Use it as the scroll viewport, with your page and footer as children.

"use client"

import { StretchyFooter } from "@/components/ui/stretchy-footer"

export function Page() {
  return (
    <StretchyFooter className="h-svh bg-background">
      <main className="min-h-[120%] px-8 py-24 text-foreground">
        {/* …page content… */}
      </main>
      <footer className="px-8 pb-10 text-center text-muted-foreground">
        23rd · opinionated UI for shippers
      </footer>
    </StretchyFooter>
  )
}

For window scroll, pass windowScroll and mark the page root with data-stretchy-page:

"use client"

import { StretchyFooter } from "@/components/ui/stretchy-footer"

export function DocsChrome() {
  return (
    <>
      <div data-stretchy-page>{/* page content */}</div>
      <StretchyFooter windowScroll />
    </>
  )
}

Props

Prop	Type	Default
`children`	`ReactNode` / snippet	none
`scrollRef`	`RefObject<HTMLElement \| null>`	React: self as scroller
`scrollEl`	`HTMLElement`	Svelte: self as scroller
`windowScroll`	`boolean`	`false`
`contentSelector`	`string`	`[data-stretchy-page]`
`maxStretch`	`number`	`280`
`colors`	`string[]`	magenta → navy
`stiffness`	`number`	`380`
`damping`	`number`	`32`
`columns`	`number`	`9`
`blur`	`number`	`16`, px
`glow`	`number`	`0`, floor bloom, 0–1
`flip`	`boolean`	`false`, valley shape
`rotate`	`0 \| 180`	`0`, `180` hangs it from the page
`label`	`string`	`Stretchy overflow`
`demoId`	`string`	pairs with `playStretchyFooterDemo({ target })`
`className`	`string`	React only
`class`	`string`	Svelte only