CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/local-live-timer

Local Live Timer

A live countdown to a target date — DD : HH : MM : SS with tabular numerals, smooth digit flip, and customisable label.

ReactFont#countdown#timer#typography

Usage

import LocalLiveTimer from '@crazygl/hero-local-live-timer';

export default function Page() {
  return (
    <LocalLiveTimer
      label="LAUNCHING IN"
      targetIso="2026-12-31T23:59:59Z"
      expiredLabel="LIVE NOW"
    />
  );
}

Customise

  • Content — label (top label), targetIso (ISO target date), expiredLabel, fallbackSeconds (countdown length if targetIso is empty).
  • Display — showDays, showLabels (per-unit DAYS/HRS/MIN/SEC captions).
  • Typography — textColor, labelColor, digitSize (px), headingFontFamily (Google font, default JetBrains Mono), headingFontWeight.
  • Backdrop — transparentBackground, bgColor.

Best for

  • Product launch and pre-order pages with a hard deadline
  • Webinar, drop, sale or event countdowns
  • Waitlist / "coming soon" landing pages
  • Any section that needs a precise, monospaced ticking timer
01 · Install the package

One command, zero config.

npm install @crazygl/hero-local-live-timer
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import LocalLiveTimer from '@crazygl/hero-local-live-timer';

export default function Landing() {
  return (
    <LocalLiveTimer />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import LocalLiveTimer from '@crazygl/hero-local-live-timer';

export default function Page() {
  return (
    <section>
      <LocalLiveTimer
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

Type Writer Custom

A typewriter with fully customisable per-step sequencing: type N chars, pause, delete M chars, type more, then loop.

Text Swap Animation

Phrases swap with a clean two-layer flip — old rises and fades, new rises in from below. The cleanest possible rotator.

Dynamic Fill Nav

A nav bar where each link reveals a coloured fill on hover — left-to-right wipe behind a flat-coloured label.

Pillflow Action Menu

A row of pill-shaped action buttons where each pill expands its label on hover — Apple-tab-bar grade affordance.

Rotating Text Pro

Slot machine with a 3D flip in X — the rotating word flips over a horizontal axis like a split-flap board.Live customizer

Local Live Timer

Show daysShow unit labelsDigit colourLabel colourDigit size120pxFontWeight700Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.