Back

Library

/

Pro

/

112

Futuristic Typing

112

Futuristic Typing

A futuristic type-out effect that cycles through a list of phrases

Made by

@frameroverrides

override

none

Override

Futuristic Typing

Copy

Override

Copied to Clipboard!

Instructions

At the top of the code you will see a few different const you can use these to customize the animation.

edit the words under const words to add your own phrases

Below you will see const speed and const backSpeed where you can customize the speed

Code Preview

import type { ComponentType } from "react"
import { useState, useEffect } from "react"

export function onDynamicTextSwitch(Component): ComponentType {
    return (props) => {
        // Configuration
        const words = [
            "designer",
            "developer",
            "entrepreneur",
            "unicorn",
            "creator",
        ]
        const letters =
            "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&^+=-!$*()@?<>[]{}|/"
        const speed = 50 // ms per step for typing
        const backSpeed = 25 // ms per step for backspacing
        const steps = 5 // number of scrambling steps before final letter
        const displayPauseDuration = 1000 // Duration of pause while word is displayed (ms)
        const pauseDuration = 0 // Duration of pause between words (ms)

        // States
        const [displayedText, setDisplayedText] = useState("")
        const [currentWordIndex, setCurrentWordIndex] = useState(0)

        const getRandomLetter = () =>
            letters[Math.floor(Math.random() * letters.length)]

        const backspaceWord = (word) => {
            for (let k = word.length; k >= 0; k--) {
                setTimeout(() => {
                    setDisplayedText(word.slice(0, k))
                    if (k === 0) {
                        // After last letter is removed
                        setTimeout(() => {
                            setCurrentWordIndex(
                                (prevIndex) => (prevIndex + 1) % words.length
                            ) // Start next word after a pause
                        }, pauseDuration)
                    }
                }, backSpeed * (word.length - k))
            }
        }

        const animateWord = (word, idx = 0, step = 0) => {
            if (idx < word.length) {
                // If there are more letters to animate
                if (step < steps) {
                    // Scramble letters
                    setDisplayedText(
                        (text) =>
                            text.substring(0, idx) +
                            getRandomLetter() +
                            text.substring(idx + 1)
                    )
                    setTimeout(
                        () => animateWord(word, idx, step + 1),
                        speed / steps
                    )
                } else {
                    // Set correct letter and move to next
                    setDisplayedText(
                        (text) =>
                            text.substring(0, idx) +
                            word[idx] +
                            text.substring(idx + 1)
                    )
                    setTimeout(() => animateWord(word, idx + 1, 0), speed)
                }
            } else if (idx === word.length) {
                // After last letter, pause while word is displayed
                setTimeout(() => backspaceWord(word), displayPauseDuration) // Start backspacing after pause
            }
        }

        useEffect(() => {
            const currentWord = words[currentWordIndex]
            setDisplayedText("_".repeat(currentWord.length)) // Initialize with underscores or spaces
            animateWord(currentWord) // Start animation
        }, [currentWordIndex])

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

Terms of Use for Pro & VIP 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, paid templates only (with the use of up to 10 assets per template), 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.