Skip to content

Pedestal Footer

A footer where the product comes to rest: as it scrolls into view the dial floats down onto a mirror floor, its parts closing up as it lands, over a large wordmark lit from the object's key light.

ProSpatial 3Dminimal

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.

Preview
Scroll down

Props

No runtime dependencies
"use client";

import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";

/**
 * PedestalFooter — a footer where the object comes to rest.
 *
 * As the footer rises into view the dial floats down onto a mirror floor
 * (WebGL2), its parts a little apart on the way and closing as it lands,
 * then drifts and can be turned; beneath it the name is set large and lit
 * from the object's key light, over the links and the legal line.
 *
 * Part of the Spatial 3D kit: a dark studio (#0a0a0d, panels #101114 and
 * #16171b, ink #f2f1ee) with anodised copper #ff7a3d only as light, and
 * one object in three finishes (titanium, ceramic, soft-touch polymer) under
 * one rig: key, fill and rim, soft shadows, occlusion and a softbox
 * reflection. Hanken Grotesk through var(--font-hanken) for display over

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this section

A footer that ends the page on the product. As the footer rises into view the dial floats down onto a dark mirror floor, its parts a little apart on the way and closing up as it lands, all on springs driven by the scroll; then it stands, drifts on the page clock and can be turned by hand. Beneath it the name is set very large in the display face, lit as the object is, bright at the top left and falling off to the right, over four link columns and the legal line. It reads the page's scroll, or the scroll root the kit's site provides inside a frame.

Curator’s note

The Spatial 3D kit's footer (slot 9), cut from spatial-3d-site. Pro: it runs the WebGL2 raymarcher (the kit's engine), so the motion primitive is the borderline entry that stays Free.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

A footer where the lights come out as the page ends: scroll raises the aurora from behind the city's roofline, widens it into violet and rose and lights more windows under a large lit wordmark.

footerscrollwebgl
NewPro

The product taken apart live in WebGL2: its parts separate on a spring and each carries a callout pinned to it by a leader line re-projected from the 3D scene every frame, so labels stay on their part as it turns.

sectionwebgl3d
NewPro

Pricing where each tier is a material shown on the product itself: the dial stands on a mirror floor in the chosen finish, changes material when you pick another tier, hops and clicks its ring round.

pricingwebgl3d