Jelly Orb Transcript

A speaking gel orb with a tappable karaoke transcript and configurable text, reading pace, colors, and font.

How it works

1. One continuous spoken shared value tracks the fractional word currently being read.
2. Each word derives its color and subtle rise from that value, so tapping any word seeks immediately.
3. Words with at least seven letters launch directional traveling waves around the rim, each with one damped rebound (mass 1, stiffness 64, damping 12; damping ratio 0.75). An optional audio level adds slow deformation.
4. One compact Canvas combines the violet-to-cyan gel shader, moving caustic filaments, two sliding specular highlights, a radial aura, and up to four translucent bubbles emitted by long words, each rising over 2.6 seconds.
5. A falling droplet flattens and grows with one subdued rebound; an expanding ambient wash and delayed transcript reveal finish within 1.8 seconds. Each spoken word leaves cyan ink that fades continuously over 800 ms.
6. Reduced motion skips the introduction and freezes the gel, removing impacts, particles, and text glow while retaining readable state changes.

Install

npx expo install @shopify/react-native-skia expo-linear-gradient react-native-reanimated react-native-worklets

For web, initialize CanvasKit before mounting the component using the application's Skia loader. No native package beyond these Expo SDK compatible dependencies is required.

Usage

import JellyOrbTranscript from './JellyOrbTranscript';

<JellyOrbTranscript text={'A short line.\nA second line.'} />

import { useRef } from 'react';
import { useSharedValue } from 'react-native-reanimated';
import JellyOrbTranscript, { type JellyOrbTranscriptRef } from './JellyOrbTranscript';

const level = useSharedValue(0);
const player = useRef<JellyOrbTranscriptRef>(null);
<JellyOrbTranscript ref={player} level={level} wordsPerSecond={2.7} onOpenChat={openChat} />;
player.current?.seekToWord(4);

Props

The ref exposes play(), pause(), restart(), and seekToWord(index).

Compatibility

Targets Expo SDK 58, React Native 0.88, Reanimated 4.7, and Skia 2.14. Intended for iOS, Android, and web in Expo Go with the matching SDK.

Accessibility

Interactive controls have button roles and labels. Each word is an accessible seek target. Reduced motion removes the introduction, moving shader, traveling waves, bubbles, and text glow while preserving the spoken and pending color distinction. The host screen applies safe-area insets.

Why this one

The transcript and orb share one reading position, turning static speech copy into a seekable voice moment with tactile visual feedback.

Icons: Lucide (ISC).

Calm motion tuning

Timing constants are grouped at the top of JellyOrbTranscript.tsx. The public props and ref methods are unchanged.

The pre-adjustment rush came from these locations in that file (line numbers refer to ticket 1):

Pauses begin after a punctuation-bearing word finishes. Seeking clears any pending pause. Reduced motion retains the same reading cadence without animated gel or glow.