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.
Canvas 2D0 deps1 file · 44 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
