Text / React + Web APIs
Text Decode
Resolve a scrambled transmission into stable, readable typography.
Open experiment[ EXP-036 / PLAYGROUND MODE ]
Signal Band Scramble / Playground
Scramble and resolve AMIRUL HAQIMI inside a field of softly moving signal noise.
EXP-036 / LIVE PREVIEW
AMIRUL HAQIMISTATIC / REDUCED MOTION
REDUCED MOTION / STATIC RESULT
Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.
01 / Overview
Scramble and resolve AMIRUL HAQIMI inside a field of softly moving signal noise. Adapted from the portfolio implementation listed below, with manual playback for inspection.
Portfolio implementation
src/components/TemporalSignalBand/TemporalSignalBand.jsxsrc/components/TemporalSignalBand/signalTransition.jssrc/components/TemporalSignalBand/TemporalSignalBand.css
02 / How it works
The portfolio signal band updates phrases on navigation using stepped per-character swaps and randomized settle times, while sparse background glyphs mutate and scroll energy lifts the rows. This study isolates the text transition and wave inside the preview, with the name as its readable phrase.
03 / Implementation
Actual React demo source. Import this component with the archive stylesheet and pass variant (signalScramble), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.
Loading implementation…
04 / Parameters
| Parameter | Type | Range | Default |
|---|---|---|---|
| Duration | Number | 0.4–3s | 0.9s |
| Intensity | Number | 0.2–1 | 0.6 |
05 / Usage & accessibility
This is a contained portfolio-derived study, not the full page controller. Play starts one transition; Replay resets it. Pause freezes active timelines. Scroll Camera Glitch requires scrolling inside its focusable preview after Play. Reduced motion shows a stable composition. Frames, timelines and local listeners are released on unmount.
Requires a current browser with Web Animations, requestAnimationFrame and Pointer Events. Background imagery is decorative; essential labels remain in the document. The magnetic target supports tap and keyboard activation.
Related experiments.
Text / React + Web APIs
Character Rise
Bring individual letters up into a readable line.
Open experiment