#

Hero

#

#

Hero

#

#

#

SC Typewriter Title

SC Typewriter Title

SC Typewriter Title

Sep 1, 2025

0 views

A configurable typewriter headline for Framer. Displays a fixed lead-in plus a rotating list of phrases, typed and erased with a blinking caret. Tunable typing speed, hold time, caret style, layout (inline/stacked), and full typography controls.

Get Component

Get Component

Get Component

Get Component

Preview

Preview

Preview

Preview

Lilac Flower
Lilac Flower
Lilac Flower
Lilac Flower

[MAIN]

{#main}

[MAIN]

{#main}

[MAIN]

{#main}

[MAIN]

{#main}

[OVRV]

Overview

[OVRV]

Overview

[OVRV]

Overview

[OVRV]

Overview

#
Built With
React (hooks), CSS (inline), Framer Code Component API
#
Layout Support
Responsive; inline or vertical stacking
#
Orientation
Text-only, left-to-right sequence
#
Ideal Use Case
Hero headings, landing page taglines, product slogans
#
Built With
React (hooks), CSS (inline), Framer Code Component API
#
Layout Support
Responsive; inline or vertical stacking
#
Orientation
Text-only, left-to-right sequence
#
Ideal Use Case
Hero headings, landing page taglines, product slogans
#
Built With
React (hooks), CSS (inline), Framer Code Component API
#
Layout Support
Responsive; inline or vertical stacking
#
Orientation
Text-only, left-to-right sequence
#
Ideal Use Case
Hero headings, landing page taglines, product slogans

//

Tags

typewriter
headline
caret
animated text
rotating phrases

[DEPS]

Dependencies

[DEPS]

Dependencies

[DEPS]

Dependencies

[DEPS]

Dependencies

//
Technologies
None (pure React + timers)
//
Notes
No external motion libraries; uses setTimeout/setInterval.
//
Technologies
None (pure React + timers)
//
Notes
No external motion libraries; uses setTimeout/setInterval.
//
Technologies
None (pure React + timers)
//
Notes
No external motion libraries; uses setTimeout/setInterval.

[CMPLX]

Complexity

[CMPLX]

Complexity

[CMPLX]

Complexity

[CMPLX]

Complexity

#
Logic Level
Medium (typed/deleted state machine, timers, looping)
#
Runtime Cost
Very Low (string slicing; no RAF)
#
Component Size
~3–4 KB TSX
#
Notes
Timers are cleaned on unmount to prevent leaks.
#
Logic Level
Medium (typed/deleted state machine, timers, looping)
#
Runtime Cost
Very Low (string slicing; no RAF)
#
Component Size
~3–4 KB TSX
#
Notes
Timers are cleaned on unmount to prevent leaks.
#
Logic Level
Medium (typed/deleted state machine, timers, looping)
#
Runtime Cost
Very Low (string slicing; no RAF)
#
Component Size
~3–4 KB TSX
#
Notes
Timers are cleaned on unmount to prevent leaks.

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[STEP]

Instructions

[STEP]

Instructions

[STEP]

Instructions

[STEP]

Instructions

  1. Add to your Framer project and place on the canvas.

  2. Set Fixed Text (mainTitle) and Rotating Phrases (animatedTitles).

  3. Adjust Typing Speed, Display Duration (hold), Initial Delay, and Repeat.

  4. Style with Typography, Fixed/Animated Text Color, and Cursor Style.

  5. Choose Text Arrangement: inline (side-by-side) or stacked (new line).

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

  • Preset A – Default Hero: “Designs that” + phrases: “convert & captivate” … speed=60ms, hold=1600ms, caret |

  • Preset B – Fast Tagline: speed=30ms, hold=800ms, blink=300ms, layout=inline

  • Preset C – Minimal Stacked: layout=stacked, fontSize=32, caret _, colors: main #111, animated #555

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[HOW]

How it Works

[HOW]

How it Works

[HOW]

How it Works

[HOW]

How it Works

  • Maintains index (phrase), subIndex (char position), and deleting flags.

  • Typing/deleting steps scheduled with setTimeout(typeSpeed).

  • After fully typed, waits holdTime then switches to deleting.

  • On reaching 0 chars, advances to next phrase; loops if loop=true.

  • Caret blinking toggled via setInterval(caretBlinkSpeed); blink is CSS opacity.

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

  • Typing uses setTimeout; no layout thrash; safe for most devices.

  • Smaller typeSpeed = faster typing; tune holdTime for rhythm.

  • Long strings are fine; avoid extremely large phrase arrays for readability.

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

  • Modern browsers; no WebGL/RAF required.

  • Uses inline styles; adopt tokens if you need theme-wide control.

  • Text renders as real DOM text (copyable/selectable).

[QUAL]

{#quality}

[QUAL]

{#quality}

[QUAL]

{#quality}

[QUAL]

{#quality}

[A11Y]

Accessibility

[A11Y]

Accessibility

[A11Y]

Accessibility

[A11Y]

Accessibility

  • Pure text output; readable by screen readers.

  • Motion sensitivity: consider exposing a toggle or respecting prefers-reduced-motion (pause typing & caret).

  • Ensure color contrast for both fixed and animated text.

[SEC]

Security & Privacy

[SEC]

Security & Privacy

[SEC]

Security & Privacy

[SEC]

Security & Privacy

  • No network calls or storage.

  • No dangerouslySetInnerHTML or eval.

  • All timers are cleared on unmount.

[REF]

{#reference}

[REF]

{#reference}

[REF]

{#reference}

[REF]

{#reference}

[API]

Props

[API]

Props

[API]

Props

[API]

Props

Name

Type

Default

Description

mainTitle

string

“Designs that”

Static lead-in text that never changes.

animatedTitles

string

“convert & captivate”

Array of phrases to type and erase in order.

font

FontStyle

family:“Inter”

Typography for both fixed and animated segments.

mainColor

color

”#000000”

Color for the fixed text.

animatedColor

color

”#333333”

Color for the animated text.

caretChar

enum

”|”

Caret glyph used during typing.

caretBlinkSpeed

number

500

Blink interval for caret visibility.

typeSpeed

number

60

Delay between each typed/deleted character.

holdTime

number

1600

Time to keep a phrase fully typed before deleting.

startDelay

number

300

Initial wait before starting the typing cycle.

loop

boolean

true

If false, stops after the last phrase.

layout

enum

“inline”

Inline places phrases next to the fixed text; stacked puts them on a new line.

name:mainTitle
type:string
default:“Designs that”
desc:Static lead-in text that never changes.
name:animatedTitles
type:string
default:“convert & captivate”
desc:Array of phrases to type and erase in order.
name:font
type:FontStyle
default:family:“Inter”
desc:Typography for both fixed and animated segments.
name:mainColor
type:color
default:”#000000”
desc:Color for the fixed text.
name:animatedColor
type:color
default:”#333333”
desc:Color for the animated text.
name:caretChar
type:enum
default:”|”
desc:Caret glyph used during typing.
name:caretBlinkSpeed
type:number
default:500
desc:Blink interval for caret visibility.
name:typeSpeed
type:number
default:60
desc:Delay between each typed/deleted character.
name:holdTime
type:number
default:1600
desc:Time to keep a phrase fully typed before deleting.
name:startDelay
type:number
default:300
desc:Initial wait before starting the typing cycle.
name:loop
type:boolean
default:true
desc:If false, stops after the last phrase.
name:layout
type:enum
default:“inline”
desc:Inline places phrases next to the fixed text; stacked puts them on a new line.

Name

Type

Default

Description

name:mainTitle
type:string
default:“Designs that”
desc:Static lead-in text that never changes.
name:animatedTitles
type:string
default:“convert & captivate”
desc:Array of phrases to type and erase in order.
name:font
type:FontStyle
default:family:“Inter”
desc:Typography for both fixed and animated segments.
name:mainColor
type:color
default:”#000000”
desc:Color for the fixed text.
name:animatedColor
type:color
default:”#333333”
desc:Color for the animated text.
name:caretChar
type:enum
default:”|”
desc:Caret glyph used during typing.
name:caretBlinkSpeed
type:number
default:500
desc:Blink interval for caret visibility.
name:typeSpeed
type:number
default:60
desc:Delay between each typed/deleted character.
name:holdTime
type:number
default:1600
desc:Time to keep a phrase fully typed before deleting.
name:startDelay
type:number
default:300
desc:Initial wait before starting the typing cycle.
name:loop
type:boolean
default:true
desc:If false, stops after the last phrase.
name:layout
type:enum
default:“inline”
desc:Inline places phrases next to the fixed text; stacked puts them on a new line.

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

  • Pure text output; readable by screen readers.

  • Motion sensitivity: consider exposing a toggle or respecting prefers-reduced-motion (pause typing & caret).

  • Ensure color contrast for both fixed and animated text.

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

  • No network calls or storage.

  • No dangerouslySetInnerHTML or eval.

  • All timers are cleared on unmount.

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[AUTH]

Credits

[AUTH]

Credits

[AUTH]

Credits

[AUTH]

Credits

Implementation & Framer adaptation by SecretoCho Design.

SecretoCho Design 2025

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

Provided “as is” for visual/UX purposes. Validate accessibility (contrast, motion), and performance within your layout.

SC ThreeJS Audio Particles

SC ThreeJS Audio Particles

SC ThreeJS Audio Particles

SC ThreeJS Audio Particles

Stay ahead of the curve with insights into emerging visualization trends and technologies.

SUBSCRIBE

SUBSCRIBE

SUBSCRIBE

SUBSCRIBE

About

Book a Call

Book a Call

Book a Call