---
title: "Time-Based Text — Free Framer component · Best of Framer"
description: "Free Framer component · by Richard de Jaroueh · Text. Time-Based Text automatically changes its content depending on the visitor’s local time."
canonical: "https://framer.elliotli.dev/component/time-based-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Time-Based Text

# Time-Based Text

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

![Time-Based Text preview image 1](https://framer.elliotli.dev/og/component/time-based-text/2ba6a321a0225b56/1600x1200.jpg)

## Summary

Time-Based Text automatically changes its content depending on the visitor’s local time.

## Description

**Time-Based Text** automatically changes its content depending on the visitor’s local time. You can define any number of time windows and set a default text for all other times.

**Typical use cases**

-   Show service hours (“We’re available now”)
    
-   Time-sensitive CTAs (“Order before 11:45”)
    
-   Night messages (“Responses may be delayed”)
    
-   Event reminders (“Next show today at 8:15 PM”)
    

**How to use**

1.  Drag **Time-Based Text** onto your canvas.
    
2.  Add one or more time windows (HH:MM format for start & end) and the text you want displayed for each.
    
3.  Set a **default text** for all other times.
    
4.  Adjust typography, colors, alignment, padding, and radius to match your design.
    

**Editor live preview**

In the Canvas you immediately see the text that matches the current time and your defined windows.

**Tips**

-   Keep time windows non-overlapping for clarity.
    
-   Use multiple instances (e.g., header CTA + footer notice) with different schedules.
    
-   Text updates automatically on load and every minute.
    

**Accessibility**

Outputs plain text inside a <div>. Combine with ARIA labels or semantic containers if needed.

**Performance**

Lightweight: runs a time check once per minute after initial render.

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

-   All · #5615

## Details

- **Author**: Richard de Jaroueh
- **Published**: 2025-08-26
- **Updated**: 2025-09-20
- **Added**: 2025-08-17
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing