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.
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
Duration — set the timer length from 1 to 3600 seconds
Auto Start — toggle whether the timer begins automatically on load
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
Radius — adjust the card corner radius from 0 to 60px
Show Timer — toggle the countdown text on or off
Font — choose any font from Framer's font picker
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
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
