---
title: "Time Greeting — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Launchly · Backgrounds. TimeGreeting adds a human, time-aware layer to your interface by greeting users based on the current hour of the day."
canonical: "https://framer.elliotli.dev/component/time-greeting"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Time Greeting

# Time Greeting

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

![Time Greeting preview image 1](https://framer.elliotli.dev/og/component/time-greeting/a93ecb1646b9a662/1600x1200.jpg)

## Summary

TimeGreeting adds a human, time-aware layer to your interface by greeting users based on the current hour of the day.

## Description

**TimeGreeting** adds a human, time-aware layer to your interface by greeting users based on the current hour of the day. From _“☀️ Good morning”_ to _“🌙 Good night”_, it automatically updates in real time — refreshing every minute to stay accurate without any extra setup.

Perfect for **dashboards**, **personalized landing pages**, or **welcome screens**, it gives your design a warm, contextual feel that changes naturally throughout the day.

You can fully customize its appearance — from font and text color to background gradients — to fit any brand or theme. It’s lightweight, responsive, and entirely built in React for seamless Framer performance.

### Key Features

-   **Automatic Time Detection** — Displays greetings based on real-world time (morning, afternoon, evening, night).
    
-   **Live Updates** — Refreshes automatically every minute to stay accurate.
    
-   **Built-In Emojis** — Adds expressive, time-relevant icons for warmth and personality.
    
-   **Customizable Design** — Adjust font, size, colors, and background gradients.
    
-   **Lightweight & Responsive** — Built purely with React hooks, no dependencies.
    

### Use Cases

-   Personalized app or dashboard greetings
    
-   Landing page hero messages
    
-   Smart onboarding or login screens
    
-   Creative portfolio headers
    
-   Context-aware welcome banners
    

### How to Use

1.  Drag **TimeGreeting** onto your Framer canvas.
    
2.  Customize your **font**, **text color**, and **background** in the right panel.
    
3.  Adjust the layout size as needed — the text auto-centers responsively.
    
4.  Preview or publish — the greeting updates live based on the user’s system time.
    

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

-   All · #8671

## Details

- **Author**: Launchly
- **Price**: $5.00
- **Published**: 2025-11-20
- **Updated**: 2026-01-03
- **Added**: 2025-11-11
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background