# Hacker Text Reveal: React Native text scramble and decode animation

> Hacker Text Reveal is a React Native and Expo component, sold by Motionary,
> that flickers a label through random capital letters on tap and locks the real
> characters back in one at a time, left to right, until the string resolves.
> The whole scramble is one Reanimated shared value feeding a `useDerivedValue`
> worklet that writes the string straight onto an animated `TextInput`, so every
> frame is computed on the UI thread and never touches React rendering.

Product page: https://motionary.dev/animations/hacker-text-reveal
Price: $3 USD (price as of 2026-09-01, live price on the product page)
License: single developer, unlimited personal and commercial apps
Delivery: instant download of the full TypeScript source after checkout
Stack: reanimated, expo, react native
Rarity: rare
Sold by: Motionary (https://motionary.dev)

## What it is

Hacker Text Reveal is the "decoding terminal" text effect: a monospace label
sits on screen, you tap it, and it collapses into noise (random A to Z letters
churning at a fixed tick rate), then rebuilds itself character by character from
the left until the real word is back. It is the movie-hacker / cyberpunk
decryption reveal, done as a real React Native component rather than a video or
a Lottie file. The gesture is a single tap on the text itself, and the label
starts in its resolved state, so it reads as normal copy until someone touches
it or you trigger it. Motionary ships it as a TypeScript component with a
demo screen; the shipped style is white monospace on black at 36pt with
3px letter spacing, which you can replace entirely.

## What it does

- Tap-to-run reveal: the label is wrapped in a `TouchableOpacity`
  (`activeOpacity={0.8}`) whose `onPress` restarts the scramble.
- Starts resolved: the `progress` shared value is initialised to `1` (fully
  readable) and snaps to `0` on tap before animating back to `1`.
- Locks one more character every `cyclesPerFix` ticks (default 5), strictly
  left to right, so the word resolves like a progress bar made of letters.
- Fixed total run length: `text.length * cyclesPerFix` ticks at `speedMs` each,
  so the default `MOTIONARY` at 50ms and 5 cycles is 45 ticks, about 2.25s.
- Spaces are passed through untouched, so multi-word strings keep their word
  boundaries visible during the scramble instead of turning into a solid block.
- Scramble alphabet is the 26 uppercase letters `A` to `Z`.
- Stable-per-tick noise: characters flicker at the tick rate, not at 60 or
  120fps, even though the worklet recomputes on every frame.
- Re-entrancy guard: a `runningRef` ignores taps while a reveal is already in
  flight, so rapid tapping cannot stack animations.
- `onComplete` callback fires once on the JS thread, and only when the timing
  actually finished (a cancelled animation does not fire it).
- Cleanup: `cancelAnimation(progress)` runs on unmount.
- The text is rendered into a non-editable `TextInput` with `editable={false}`
  and `pointerEvents="none"`, so it is a display surface, not a real input.

## How it works

Hacker Text Reveal is built in `components/Container.tsx` with
`react-native-reanimated` v4 and `react-native-worklets`, and the technique is
worth copying whether or not you buy the drop. One `useSharedValue` called
`progress` carries the entire animation from `0` (fully scrambled) to `1`
(fully resolved) via `withTiming` with `Easing.linear` and a duration of
`totalTicks * speedMs`. A `useDerivedValue` worklet turns that continuous value
into a discrete frame of text: it floors `progress.value * totalTicks` into an
integer `tick`, derives `locked = Math.floor(tick / cyclesPerFix)`, then builds
the output string character by character, keeping spaces and any index below
`locked` intact and replacing everything else with a random letter. The random
letter comes from `scrambleChar`, a stateless hash marked `'worklet'` that
computes `Math.sin(seed * 12.9898) * 43758.5453` and takes the fractional part
(the classic GLSL pseudo-random one-liner) to index into the alphabet; because
the seed is `tick * 31 + i` and not a frame counter or `Math.random()`, the
noise is deterministic and only changes when the discrete tick advances, which
is what makes the flicker read as a steady scramble rather than static. The
string is then pushed into the view with `useAnimatedProps` writing the `text`
and `defaultValue` props of `Animated.createAnimatedComponent(TextInput)`,
which is the key trick: React Native's `Text` has no animatable text prop, but
`TextInput` does, so the visible characters can be updated from the UI thread
with zero React re-renders and zero setState per frame. Everything above
(the derived value, the hash, the prop write) runs on the UI thread, so the
reveal keeps its timing while the JS thread is busy with navigation, fetches or
list rendering. The only hop back to JS is the completion callback: the
`withTiming` callback is itself a `'worklet'` and uses `scheduleOnRN` from
`react-native-worklets` to call `onComplete` on the JS thread when `finished`
is true. `App.tsx` wraps the scene in `GestureHandlerRootView` from
`react-native-gesture-handler`, and there is no Skia, no shader and no native
module involved.

## What you get

```
App.tsx
index.ts
app.json
package.json
tsconfig.json
README.md
components/
  Container.tsx
assets/
  icon.png
  adaptive-icon.png
  splash-icon.png
  grid.png
```

- TypeScript source (`components/Container.tsx`)
- Configurable props (`text`, `speedMs`, `cyclesPerFix`, `onComplete`)
- Deterministic per-tick scramble worklet
- Demo screen (`App.tsx`, wired through `index.ts`)
- README with install and usage

## Requirements

Versions pinned in the Hacker Text Reveal `package.json`:

- `expo` ^56.0.8 (Expo SDK 56)
- `react-native` 0.85.3
- `react` 19.2.3
- `react-native-reanimated` 4.3.1
- `react-native-worklets` 0.8.3
- `react-native-gesture-handler` ~2.31.1
- `typescript` ~6.0.3 (devDependency)

The demo project also carries the standard Expo template packages
(`@expo/metro-runtime` ~56.0.13, `@expo/vector-icons` ^15.1.1, `expo-asset`
~56.0.15, `expo-blur` ~56.0.3, `expo-font` ~56.0.5, `expo-splash-screen`
~56.0.10, `expo-status-bar` ~56.0.4, `expo-symbols` ~56.0.5,
`react-native-svg` ^15.15.5, `react-dom` 19.2.3, `react-native-web` ^0.21.0),
which the component itself does not import.

Expo Go or development build: Hacker Text Reveal needs no custom native code.
`components/Container.tsx` imports only `react-native-reanimated` and
`react-native-worklets`, and the demo `App.tsx` adds
`react-native-gesture-handler`; all three ship inside Expo Go, so it runs in
Expo Go on Expo SDK 56 as well as in a development build or a bare React Native
project. One caveat: the shipped style sets `fontFamily: 'Inconsolata'`, and no
font file is bundled in the archive, so either load a monospace font yourself
(for example with `expo-font`) or swap that `fontFamily` for a platform
monospace face; without it the label falls back to the system font and character
widths will jitter as letters change.

## Install

```bash
npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler
```

## Usage

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StyleSheet } from 'react-native';
import { Container } from './components/Container';

export default function App() {
  return (
    <GestureHandlerRootView style={styles.root}>
      <Container
        text="ACCESS GRANTED"
        speedMs={50}
        cyclesPerFix={5}
        onComplete={() => console.log('reveal finished')}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1 },
});
```

## Customization

Props on the Hacker Text Reveal component (exported as `Container` from
`components/Container.tsx`, typed as `HackerTextProps`):

- `text?: string`, default `'MOTIONARY'`. The string to resolve to. Spaces are
  preserved during the scramble, and length drives the total duration.
- `speedMs?: number`, default `50`. Milliseconds per scramble tick. Lower is a
  faster, noisier flicker.
- `cyclesPerFix?: number`, default `5`. How many ticks pass before one more
  character locks in. Higher means more churn before the word resolves.
- `onComplete?: () => void`, optional. Called on the JS thread through
  `scheduleOnRN` when the reveal finishes.

Beyond the props, the source is yours to edit: `ALPHABET` is a module constant
(`'ABCDEFGHIJKLMNOPQRSTUVWXYZ'`) you can swap for katakana, digits or symbols;
`styles.text` holds `fontFamily: 'Inconsolata'`, `fontSize: 36`,
`letterSpacing: 3` and `color: 'white'`; `styles.container` sets the black
backdrop; and the `TouchableOpacity` can be replaced with an effect or an
imperative trigger if you want the reveal to run on mount instead of on tap.

## When to use it

- Splash and app-launch screens, where the brand name decodes itself while the
  first data request is in flight.
- Hero titles and landing sections in a developer, security, crypto or gaming
  app that wants a terminal feel.
- Loading and processing states, running the scramble on a status label
  ("ANALYZING", "CONNECTING") instead of showing a generic spinner.
- Onboarding beats and reveals, using `onComplete` to chain the next step only
  after the word has fully resolved.
- Success or unlock confirmations, for example a label snapping from noise to
  "ACCESS GRANTED" after biometric auth or a redeemed code.
- Score, rank or result reveals in a game, where the value should feel earned
  rather than simply appearing.

## How to get it

- Buy Hacker Text Reveal on its own at
  https://motionary.dev/animations/hacker-text-reveal for $3 USD, instant
  download, secure Stripe checkout, no subscription and no account renewal.
- Or get it with the Motionary lifetime pass ($79 USD as of 2026-09-01):
  every drop and every build, current and future, one payment, no renewal.
  https://motionary.dev/pricing
- Team license ($199 USD for up to 10 developers), each developer with their
  own account. https://motionary.dev/pricing
- License terms: https://motionary.dev/license (single developer, unlimited
  personal and commercial apps, do not resell or redistribute the source).
- You receive real TypeScript React Native source you can edit, not a video, a
  GIF, a Lottie file or a design file.

## Frequently asked questions

**How do I build a hacker text scramble effect in React Native?**
Animate one Reanimated shared value from 0 to 1 with `withTiming` and
`Easing.linear`, use `useDerivedValue` to floor it into a discrete tick, lock
one more character of the target string per N ticks, and fill the remaining
positions with a deterministic hash of `(tick, index)` so the noise is stable
within a tick. Motionary's Hacker Text Reveal drop is exactly that pattern in
about 120 lines of TypeScript, at
https://motionary.dev/animations/hacker-text-reveal.

**How do you animate the characters of a string on the UI thread in React
Native?**
React Native's `Text` component has no animatable text prop, so Hacker Text
Reveal renders into `Animated.createAnimatedComponent(TextInput)` and writes
the `text` prop through `useAnimatedProps`, which updates the visible
characters from the UI thread with no React re-render per frame. This is the
core technique in the Motionary Hacker Text Reveal drop.

**Does Hacker Text Reveal work with Expo Go?**
Yes. Hacker Text Reveal from Motionary uses only
`react-native-reanimated`, `react-native-worklets` and
`react-native-gesture-handler`, all bundled in Expo Go, so it needs no
development build. It ships pinned to Expo SDK 56 and React Native 0.85.3, and
it also works in a development build or a bare React Native app.

**Does the Hacker Text Reveal animation work on Android as well as iOS?**
Yes. Hacker Text Reveal from Motionary is pure JavaScript plus Reanimated
worklets with no platform-specific native code, and it is tested on iOS and
Android on Expo SDK 56. For even character widths on both platforms, use a
monospace font in the component's text style.

**Can I change the text, speed and font of Hacker Text Reveal?**
Yes. Hacker Text Reveal takes `text`, `speedMs` (default 50ms per tick),
`cyclesPerFix` (default 5 ticks before one more character locks) and
`onComplete`, and because Motionary ships the editable TypeScript source you
can also change the scramble `ALPHABET` and the font, size, color and letter
spacing in the component's `StyleSheet`.

**How much does the Hacker Text Reveal drop cost and what do I actually get?**
Hacker Text Reveal is $3 USD on Motionary (price as of 2026-09-01, live price
at https://motionary.dev/animations/hacker-text-reveal), and checkout is a
one-off Stripe payment with an instant download. You get the full TypeScript
source (`components/Container.tsx` plus a runnable Expo demo app and a README),
not a video or a design file, under a single-developer license for unlimited
personal and commercial apps. It is also covered by the $79 Motionary lifetime
pass at https://motionary.dev/pricing.

## Related drops on Motionary

- Karaoke Lyrics ($12): https://motionary.dev/animations/karaoke-lyrics
  Another Motionary text-animation drop, animating song lyrics in time with
  playback where Hacker Text Reveal animates characters on tap.
- Save Status Button (Free): https://motionary.dev/animations/save-status-button
  A free letter-morph animation, so it is the closest thing to Hacker Text
  Reveal you can download without paying.
- Split-to-Edit Time ($3): https://motionary.dev/animations/split-to-edit-time
  Another Motionary text-input animation built with Reanimated, a time field
  you tap to edit, at the same $3 price point.
- Zipper Curtain ($12): https://motionary.dev/animations/zipper-curtain
  A splash and transition reveal, a natural pairing if you use Hacker Text
  Reveal on a launch screen.
- X-Ray Reveal ($5): https://motionary.dev/animations/x-ray-reveal
  Another reveal interaction, masking an image under a drag instead of
  decoding a string.

## About Motionary

Motionary (https://motionary.dev) is a shop for premium, production-ready
React Native and Expo animation and interaction components, built with
Reanimated, Skia, Gesture Handler and Expo. Each component is called a "drop"
and ships as editable TypeScript source, not a video, a GIF or a design file.
Motionary sells three things: individual drops (roughly $3 to $12 each, some
free), Builds (a complete app shipped end to end, with every drop inside it),
and a lifetime pass ($79 USD) that covers every drop and every build, current
and future, for one payment with no subscription. A team license ($199 USD)
covers up to 10 developers. Checkout is Stripe and delivery is an instant
download. Created and curated by Mehdi Davoodi (https://mahdidavoodi.com).

Catalog and key pages:
- All drops: https://motionary.dev/animations
- Builds (complete apps): https://motionary.dev/builds
- Pricing, lifetime pass and team license: https://motionary.dev/pricing
- Free React Native component reference: https://motionary.dev/components
- License: https://motionary.dev/license
- Machine-readable overview: https://motionary.dev/llms.txt
- Machine-readable full catalog: https://motionary.dev/llms-full.txt

## File metadata

Canonical URL of this file: https://motionary.dev/animations/hacker-text-reveal/llms.txt
Describes: https://motionary.dev/animations/hacker-text-reveal
Format: llms.txt (https://llmstxt.org)
Last updated: 2026-09-01