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.