Timeboxed Message - Free

Search

Hooked to Cursor

Countdown Timer

Futuristic Typing

Password Protected

Timed Loading Bar

Attempted Escape

Toggle Between Variants

Timeboxed Message

Track # of Clicks

Controller Changes Variant

Directional Hover

Embed Any Website

Upvote / Downvote

Before & After Slider

Comment Section

Slip N’ Slide

Filtering Without CMS

Replace Cursor with Frame

Continuous Rotation

Download Any File

Stick to Cursor

Image Modal on Click

Attention Shake

Hide Header on Scroll

Countdown to Midnight Daily

CTA Tester (New CTA on Pageload)

Tinder Style Swipe

Color of Highlighted Text

Text Bubble Follows Cursor

Toast Notification

Snap Scroll Effect

Copy Link to Current Page

Randomized Text from List

Scroll Progress Bar

Multi Color Gradient Fill

Rotate to Follow Cursor

Current Time & Date

3D Spin (X-Axis)

Random Gradient

Copy to Clipboard

Random Border Color

Slide Out Right

Share on LinkedIn

Share on Facebook

3D Spin (Y-Axis)

Slide Down & Back

Share on Twitter (X)

Skew & Toggle Fill

Material Ripples

Back

Copy Link

Library

/

Free

/

105

Timeboxed Message

105

Timeboxed Message

FREE

Display a custom message depending on what time of day it is for the user

Not loading? Preview

Made by

@frameroverrides

override

none

Override

Remix & Clone

Timeboxed Message

Copy

Override

Copied to Clipboard!

Instructions

If you'd like to display different messages feel free to customize the messages in the code between the quotation marks

Code Preview

import type { ComponentType } from "react"
import * as React from "react"

export function withGreeting(Component): ComponentType {
    return (props) => {
        const hours = new Date().getHours()
        let greeting

        if (hours < 12) {
            greeting = "Good morning!"
        } else if (hours >= 12 && hours <= 17) {
            greeting = "Good afternoon!"
        } else {
            greeting = "Good evening!"
        }

        return <Component {...props} text={greeting} />
    }
}

Previous

Scroll Scrub

Next

Type Out Text

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.