This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

FlipClock Component

The project includes a FlipClock component (src/components/FlipClock.tsx) that renders a live updating flip-style digital clock with a top-half downward flip animation whenever a digit changes.

Features

• Live time updates every second (configurable via interval prop).
• Smooth 3D flip animation for each digit change (top half flips down revealing new bottom).
• Optional hideSeconds prop to show only hours and minutes.
• Component-scoped CSS animations using styled-jsx.

Props

interface FlipClockProps {
  className?: string;      // Extra wrapper classes
  interval?: number;       // Update interval in ms (default 1000)
  hideSeconds?: boolean;   // If true, hide seconds digits
}

Usage

import FlipClock from "@/components/FlipClock";

export default function Example() {
  return (
    <div className="p-8">
      <FlipClock />
      <FlipClock hideSeconds className="mt-6" />
      <FlipClock interval={500} className="mt-6" />
    </div>
  );
}

Customization

• Adjust sizes by overriding Tailwind classes in the component (e.g. w-14 h-20).
• Move the keyframes from the styled-jsx block into globals.css if you prefer global styling.

Notes

• The animation duration is 600ms; avoid setting interval lower than ~600ms to prevent overlap.
• All digits animate independently only when their value changes (e.g. minute digits won't flip every second).