---
title: "Hourglass — Free Framer component · Best of Framer"
description: "Free Framer component · by Aidan Looker · Interactive. What is Hourglass?"
canonical: "https://framer.elliotli.dev/component/hourglass"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Hourglass

# Hourglass

A smooth animated hourglass timer widget

[View on Framer](https://framer.com/marketplace/components/hourglass/?via=elliot-li)

![Hourglass preview image 1](https://framer.elliotli.dev/og/component/hourglass/03e956cad170ffb1/1600x1200.jpg)

## Summary

What is Hourglass?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #6970

## Details

- **Author**: Aidan Looker
- **Published**: 2026-03-26
- **Updated**: 2026-06-13
- **Added**: 2026-03-14
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase