Flush Wordmark Footer
A footer that ends the page in the face: a band of the glyph wave field carries a closing line, and the name stands flush across the width, rising from hairlines to full weight as the footer comes into view.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* FlushWordmarkFooter — a footer that ends the page in the face.
*
* A band of the kit's glyph wave field carries a closing line; below the
* links the name stands flush across the full width, and as the footer
* comes into view its letters rise from hairlines to full weight one after
* another with the accent passing through them. Scroll back and they lower.
* It reads the page's scroll or the kit site's scroll root; reduced motion
* shows it risen.
*
* Part of the Kinetic Type kit: paper #f0ede2 and ink #131315 (an inverted
* ink stage for loud sections), one accent that letters take only under
* load (cobalt #2b3bff by default), and Science Gothic through
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
A footer that closes the page in the kit's own voice. A band of the glyph wave field runs across the top with a closing line set on a paper tab, and the letters in it ripple under the pointer. Below the link columns, the name stands flush across the full width, and as the footer comes into view its letters rise from condensed hairlines to full weight one after another, the accent passing through each as it goes, so the page ends on the loudest type on it. Scroll back and the letters lower again; the letters under the pointer swell and lean. It reads the page's scroll, or the scroll root the kit's site provides when it runs inside a frame.
Curator’s note
The Kinetic Type kit's footer (slot 9), cut from kinetic-type-site. Pro: it composes the canvas glyph wave field (the kit's rendering engine, so it can't be Free) with a scroll-driven flush wordmark; the motion primitive is the borderline entry that stays Free.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Dusk Set Footer
sectionsA footer that sets like the sun: as it scrolls in, a grained halo sinks toward a hairline horizon, warming from gold through rose to ember, behind a giant italic serif wordmark.
Flush Lineup Poster
sectionsA line-up set as a type poster: every name flush across the measure at one cap height, pointing clenches a name into the accent, choosing opens it, and day filters collapse the rest to hairlines.
Axis Pass Pricing
sectionsPasses as tickets named in their own registers, quiet to loud: choose a pass, the count or the student rate and every figure that changes rebuilds digit by digit through the accent.