OmniGlyph is a text animation component for React and Framer. It creates a "hacker terminal" effect where text scrambles and decrypts as you scroll or load the page. We built it to run super fast without slowing down your website.
OmniGlyph is a text animation component for React and Framer. It creates a "hacker terminal" effect where text scrambles and decrypts as you scroll or load the page. We built it to run super fast without slowing down your website.
OmniGlyph is designed to be mathematically self-aware the moment it hits your canvas.
OmniGlyph is designed to be mathematically self-aware the moment it hits your canvas.
To use OmniGlyph:
To use OmniGlyph:
Drag and drop the OmniGlyph component onto your Framer canvas.
Drag and drop the OmniGlyph component onto your Framer canvas.
Enter your string in the Text to Show field.
Enter your string in the Text to Show field.
Set your Play Style to
Set your Play Style to
Link to Scroll
Link to Scroll
or
or
Play Automatically.
Play Automatically.
This will be interesting, lets go!!!
This will be interesting, lets go!!!
These settings control when and how the animation starts.
These settings control when and how the animation starts.
Property
Property
Description
Description
Play Style
Play Style
Link to Scroll ties the decryption exactly to the user's mouse wheel.
Play Automatically fires a timed animation when the text enters the viewport.
Link to Scroll ties the decryption exactly to the user's mouse wheel.
Play Automatically fires a timed animation when the text enters the viewport.
Hero Section Mode
Hero Section Mode
Turn this ON if your text is at the very top of your website.
This forces the text to start completely scrambled.
(If you leave it off at the top of a page, the browser might glitch and decrypt the text before you even scroll).
Turn this ON if your text is at the very top of your website.
This forces the text to start completely scrambled.
(If you leave it off at the top of a page, the browser might glitch and decrypt the text before you even scroll).
Decrypt In
(Requires Hero Setion Mode)
Decrypt In
(Requires Hero Setion Mode)
This is how many pixels you need to scroll down before the text finishes decrypting.
This is how many pixels you need to scroll down before the text finishes decrypting.
Physics Snap / Drag
Physics Snap / Drag
Controls the "bouncy" feeling of the scroll animation. Snap is the speed, Drag is the friction.
Controls the "bouncy" feeling of the scroll animation. Snap is the speed, Drag is the friction.
The visual aesthetic of the decryption process.
The visual aesthetic of the decryption process.
Property
Property
Description
Description
Animate By
Animate By
Parses the matrix by individual Letter, whole Word, or full Line.
Parses the matrix by individual Letter, whole Word, or full Line.
Reveal Order
Reveal Order
Decrypts sequentially (Left-to-Right) or completely Random.
Decrypts sequentially (Left-to-Right) or completely Random.
Cipher Theme
Cipher Theme
The global Unicode character set used for the encrypted state. Natively supports 14 global matrices (Binary, Matrix Katakana, Hangul, Cyrillic, etc.).
The global Unicode character set used for the encrypted state. Natively supports 14 global matrices (Binary, Matrix Katakana, Hangul, Cyrillic, etc.).
Custom Characters
Custom Characters
Allows injection of a proprietary cipher string (e.g., 01X*#) if the Theme is set to Custom.
Allows injection of a proprietary cipher string (e.g., 01X*#) if the Theme is set to Custom.
Scramble Look
Scramble Look
Crazy Flicker cycles through multiple random letters. Clean Swap shows only a single random character before locking in the real letter.
Crazy Flicker cycles through multiple random letters. Clean Swap shows only a single random character before locking in the real letter.
Flicker Amount
(Requires Crazy Flicker Mode)
Flicker Amount
(Requires Crazy Flicker Mode)
The density of the scramble pool. Higher numbers equal a longer, more chaotic decryption cycle per letter.
The density of the scramble pool. Higher numbers equal a longer, more chaotic decryption cycle per letter.
Overlap Speed
Overlap Speed
The cascade delay. Higher values force multiple characters/words to decrypt simultaneously.
The cascade delay. Higher values force multiple characters/words to decrypt simultaneously.
The 3D entrance matrix applied to the text wrapper as it resolves.
The 3D entrance matrix applied to the text wrapper as it resolves.
Property
Property
Description
Description
Animation Style
Animation Style
Curated 3D entrances (e.g., Ethereal Fade, Gravity Drop, Pendulum Swing, Gaussian Focus).
Curated 3D entrances (e.g., Ethereal Fade, Gravity Drop, Pendulum Swing, Gaussian Focus).
Starting / Ending Visibility
Starting / Ending Visibility
The opacity values clamping the start and end of the animation lifecycle.
The opacity values clamping the start and end of the animation lifecycle.
Custom Controls
Custom Controls
Selecting Custom Controls unlocks raw access to X/Y Drift, Scale, Blur, and 3D X/Y/Z Rotations.
Selecting Custom Controls unlocks raw access to X/Y Drift, Scale, Blur, and 3D X/Y/Z Rotations.
Standard text formatting passed through the engine.
Standard text formatting passed through the engine.
Property
Property
Description
Description
Highlight Words
Highlight Words
Type specific words you want to highlight from your text here.
A comma can be used to separate different words. the component will automatically apply your chosen Accent Colour to each word, regardless of where they are.
Type specific words you want to highlight from your text here.
A comma can be used to separate different words. the component will automatically apply your chosen Accent Colour to each word, regardless of where they are.
Accent Color
Accent Color
The colour you want your Highlight Words to be.
The colour you want your Highlight Words to be.
# My text at the top of the page is decrypting before I scroll!
# My text at the top of the page is decrypting before I scroll!
Turn on Hero Section Mode. We built a "15-pixel dead-zone" into this mode, meaning the animation will completely ignore accidental mouse bumps and won't start until you purposefully scroll down.
Turn on Hero Section Mode. We built a "15-pixel dead-zone" into this mode, meaning the animation will completely ignore accidental mouse bumps and won't start until you purposefully scroll down.
# Still can't get it working?
# Still can't get it working?
Don't waste hours fighting the canvas. If you've checked the settings and hit a wall, send me a message on X or Email with your project link. I will help you debug your specific setup.
Don't waste hours fighting the canvas. If you've checked the settings and hit a wall, send me a message on X or Email with your project link. I will help you debug your specific setup.
You are cleared for unlimited commercial and personal use. Deploy it on client sites. Deploy it on your portfolio. You are strictly forbidden from reselling the source code, repackaging the matrix, or distributing the raw Framer component.
You are cleared for unlimited commercial and personal use. Deploy it on client sites. Deploy it on your portfolio. You are strictly forbidden from reselling the source code, repackaging the matrix, or distributing the raw Framer component.
When you push your site to production, tag me on X. I want to see how hard you push this engine.
When you push your site to production, tag me on X. I want to see how hard you push this engine.
End of Documentation.
End of Documentation.