Hourglass

What is Hourglass?

What is Hourglass? Hourglass is a sleek, animated timer component built for Framer. It features a smooth hourglass shape that fills with color from top to bottom over a configurable duration, paired with a live countdown display. Ideal for product launches, event countdowns, focus timers, and adding visual engagement to any page. Core Features Smooth top-to-bottom fill animation with a beautifully crafted SVG hourglass shape Live countdown timer with automatic formatting for seconds, minutes, and hours Fully customizable colors for sand, glass, background, and text Auto-start toggle to begin the timer on page load or on demand Responsive scaling that adapts to any container size Controls inside Framer Timer Duration — set the timer length from 1 to 3600 seconds Auto Start — toggle whether the timer begins automatically on load Colors Sand — the fill color of the animated sand Glass — the color of the hourglass body Background — the card background color Text — the countdown text color Style Radius — adjust the card corner radius from 0 to 60px Show Timer — toggle the countdown text on or off Typography Font — choose any font from Framer's font picker Best use cases Product launch and event countdown timers Focus and productivity timer widgets Gamified UI elements for interactive experiences Visual time indicators on landing pages and dashboards Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

A smooth animated hourglass timer widget