⏰ flip-card-clock

A lightweight, dependency-free flip clock built with pure JavaScript and CSS animations.

📦 Installation

Using npm:

npm install flip-card-clock

Using yarn:

yarn add flip-card-clock

🚀 Usage

1. Add the HTML structure

<div class="clock">
  <div class="digit tenhour">
    <span class="base"></span>
    <div class="flap over front"></div>
    <div class="flap over back"></div>
    <div class="flap under"></div>
  </div>
  <div class="digit hour">
    <span class="base"></span>
    <div class="flap over front"></div>
    <div class="flap over back"></div>
    <div class="flap under"></div>
  </div>
  <div class="digit tenmin">
    <span class="base"></span>
    <div class="flap over front"></div>
    <div class="flap over back"></div>
    <div class="flap under"></div>
  </div>
  <div class="digit min">
    <span class="base"></span>
    <div class="flap over front"></div>
    <div class="flap over back"></div>
    <div class="flap under"></div>
  </div>
  <div class="digit tensec">
    <span class="base"></span>
    <div class="flap over front"></div>
    <div class="flap over back"></div>
    <div class="flap under"></div>
  </div>
  <div class="digit sec">
    <span class="base"></span>
    <div class="flap over front"></div>
    <div class="flap over back"></div>
    <div class="flap under"></div>
  </div>
</div>

2. Import CSS & JS

import 'flip-card-clock/dist/flip-card-clock.min.css';
import { initFlipClock } from 'flip-card-clock';

// Initialize on the element with class "clock"
initFlipClock('.clock');

🎨 Demo

(Add a GIF screenshot of your clock here for better presentation.)

🛠 Features

• ⚡ Pure JavaScript – no jQuery, no dependencies
• 🎞️ Smooth animations with CSS keyframes
• 📦 Lightweight (< 5kb gzipped)
• 🎨 Easy customization via CSS variables
• 🌍 Works everywhere – Vanilla JS, React, Vue, Angular

📖 API

initFlipClock(selector: string | HTMLElement)

Initializes the flip clock on the given element.

initFlipClock('.clock');   // by CSS selector
initFlipClock(document.querySelector('.clock')); // by DOM element

📄 License

MIT © Chandan Vishwakarma