---
title: "Cipher — Free Framer component · Best of Framer"
description: "Free Framer component · by Mehedi Hasan · Text. Before the flip fires, a cipher scramble cycles every character through random glyphs — like encrypted text decoding in real time."
canonical: "https://framer.elliotli.dev/component/cipher"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Cipher

# Cipher

Per-character 3D flip with cipher

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

![Cipher preview image 1](https://framer.elliotli.dev/og/component/cipher/ce5b865fba9023cd/1600x1200.jpg)

## Summary

Before the flip fires, a cipher scramble cycles every character through random glyphs — like encrypted text decoding in real time.

## Description

Each letter rotates through a virtual 3D cube to reveal a second word, a second color, or both. Before the flip fires, a cipher scramble cycles every character through random glyphs — like encrypted text decoding in real time. No CSS transition or Webflow interaction replicates this.

**Triggers** Hover (tap-to-toggle on mobile), Click, In View, and Loop — with configurable interval and hold duration so the component self-demos in any hero section without requiring interaction.

**Effects** Scramble with 5 character sets: Mixed, Uppercase, Numbers, Symbols, and Matrix (Japanese katakana カタカナ). Motion blur peaks at the flip midpoint for physical depth. 2px is subtle; 6px+ shifts to glitch.

**Directions** Top, Bottom, Left, Right, Random (stable per render), and Cycle (cascades through all four axes across characters).

**Easing presets** Snappy, Elastic, Cinematic, Butter, and Custom — replaces raw spring and tween values with named feels so designers pick a vibe, not a damping number.

**How to use** Drop onto any dark-background frame. Set Text ("THINK") and Reveal Text ("BUILD") — match character counts for a clean 1-to-1 swap. Pick a trigger, set Front Color to white, Back Color to your brand accent. Done in under a minute.

Works best on hero headlines, scroll-triggered section headers, and looping CTAs. Pair short, semantically connected words for maximum impact: DESIGN → SHIP, FAST → FASTER, NOW → WOW.

**Best pairings** Full-bleed dark hero → Cipher headline → logo marquee below. In View trigger on section headers fires the cipher on scroll entry, reverses on exit.

**Technical** Canvas preview adapts to light and dark editor backgrounds automatically. Accessible: role="text" and aria-label on wrapper, back-face spans are aria-hidden. Full typography controls: size, weight, family, tracking, leading, word gap. Perspective control from 300px (dramatic) to 3000px (nearly flat).

All sales are final.

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

-   All · #6726

## Details

- **Author**: Mehedi Hasan
- **Published**: 2026-07-09
- **Updated**: 2026-09-16
- **Added**: 2026-07-09
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing