Docs
Countdown Timer

Countdown Timer

Displays a beautiful Countdown Timer using framer-motion.

Loading...

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Event Calendar code into your project.

API Reference

Here's the API reference documentation in Markdown format for the countdown timer components:

CountdownTimer

A countdown timer component with iOS-style scrolling digits animation.

Props

PropTypeDefaultDescription
initialMinutesnumber0Initial minutes value for the countdown
initialSecondsnumber0Initial seconds value for the countdown

Example

import CountdownTimer from "@/components/countdown-timer";
 
// 5 minute countdown
<CountdownTimer initialMinutes={5} initialSeconds={0} />
 
// 2 minutes and 30 seconds countdown
<CountdownTimer initialMinutes={2} initialSeconds={30} />

DigitReel

A component that displays a single digit with an iOS-style scrolling animation effect.

Props

PropTypeRequiredDescription
valuestringYesThe digit to display (should be a single character)
classNamestringNoAdditional CSS classes to apply to the component

Example

import DigitReel from "@/components/digit-reel";

// Display the digit "5"
<DigitReel value="5" />

// With custom styling
<DigitReel value="7" className="w-16 h-24" />

Usage Notes

  • The CountdownTimer component automatically formats numbers to always have two digits
  • The timer starts automatically when the component mounts
  • When the countdown reaches zero, it stops automatically
  • The DigitReel component creates a scrolling effect with 5 digits (2 before, current, 2 after)
PreviewAnimated Tabs