Independent study / Mohamed Badawi
After the
Signal.
A field guide to the matter that remembers.
Direction, design, development / 2026
01 / Problem
Give sound a body.
Recorded sound feels immaterial. The carrier is easy to overlook until hearing it becomes difficult. This independent study makes the ribbon, coating, equipment and care visible. Its artistic instrument explains an idea without presenting itself as preservation science.
02 / Idea
One ribbon. Seven chapters.
The visitor follows magnetic tape from its material layers to recording, replay, splicing, deterioration and care. Printed type holds the facts steady. Four custom handwritten faces add a second voice, as if someone has left a note on a workbench.
03 / Process
The object sets the direction.
A dated awards survey and five-subject scorecard led to magnetic tape. Paper, graphite, silver and one oxide accent set the palette. Original generated illustrations share warm upper-left light, an 80 mm macro perspective and restrained grain. Each is credited as an illustration rather than an archival photograph.
04 / Interaction
Your mark survives the moment.
Write a signal, move the recording head, then read or erase the trace. A shared 120-sample pattern drives the field, waveform and optional synthesized audio. The final chapter returns that same trace as a personal field note. Pointer input and a native keyboard range provide parallel ways into the interaction.
05 / Engineering
Depth with an escape route.
Astro and TypeScript deliver semantic static pages. Three.js connects a continuous ribbon camera with coating displacement, a small fluid field, GPGPU grains and a raymarched recording head. Generated height, normal and matcap inputs keep the lighting tied to the material. GSAP choreographs type, pinned layers and field focus. AVIF, KTX2, lossless Meshopt and contextual font subsets serve different delivery needs. Native pause controls work independently; slower renderers can return to source plates or Canvas.
06 / Measured result
A live study, with evidence.
- Mobile Lighthouse lab
- 99
- Largest contentful paint
- 1.590s
- Cumulative layout shift
- 0
Production lab run, 1 October 2026, using Lighthouse in Microsoft Edge after mobile motion startup was deferred until interaction. Local TypeScript and build checks pass. Story, direction and 404 axe audits report zero automatic violations; image-background contrast still requires manual review.
A separate BrowserStack loading test on a real Oppo Reno 3 Pro, Android 10 and Chrome 149 returned a median score of 87, LCP 1.327s and CLS 0 before that startup change. Its blocking-time result prompted the change. Physical-device retesting requires provider account access, so no improved device score is claimed.
Loading results do not establish interactive phone frame performance or complete cross-browser compatibility. Award submission remains in preparation. No award is claimed.
A deliberate small-screen sequence
The story stays readable.
Mobile replaces the desktop pinned carrier track with stacked material layers. The signature still uses native controls. The motion button stays reachable, and the handwritten note has room to wrap on its own paper backing.
This capture is a 390-pixel Edge viewport, not a claim of physical-device testing.
07 / Lessons
The details carry the work.
Image and font delivery improved first paint. A real device then exposed work hidden by a strong lab score, so mobile choreography now starts on intent. Motion pause had to restore readable flow rather than freeze a pinned scene. Foreground geometry needed explicit reading layers and disclosure backing. A high automated accessibility score still required manual contrast, focus and keyboard review.