Skip to content
AFM Studio
  • Pages

    AFM Studio
  • Work
  • Lab
  • About
  • CV
  • Contact
  • Projects

    AksaraA searchable library for Otorita IKN's knowledge, where the server checks every reader's access across three levels
  • Daily TaqwaTamper-resistant prayer attendance system for ~2,000 OIKN government employees at Masjid Negara IKN
  • Lantara v2A permit engine for Otorita IKN where administrators add new permit types from a screen, without a developer
  • eKiosk IKNTwo control rooms for Nusantara: kiosk content management and live bus tracking with arrival times that grade themselves
  • E-Monev IKNA monitoring platform for Nusantara's 23-year build, tracking every unit's quarterly progress against 24 national KPIs
  • JDIH OIKNOIKN's public legal document portal, with a controlled publishing workflow and AI summaries that never leave the server
  • Jejak PenanamanA check-in app for IKN tree-planting events that proves each participant was on site with a geofenced selfie
  • Dashboard SAKTIA nightly pipeline and dashboard that replaces OIKN's manual budget downloads for all six of its budget units
  • DoseRxA bedside dose calculator for 127 drugs that rounds each dose to tablets and syrups Indonesian pharmacies sell
  • CubiqA speedcubing trainer with competition-grade timing and a solver I wrote for each of the 8 major puzzles
  • ScimotionAn interactive science library of 86 articles, each explained next to animations the reader can control
  • WA Daily Scrum BotA WhatsApp bot that chases missing standup reports for a 14-person team and flags tasks stuck for days

↑ ↓ to move · Enter to open · Esc to close

Anatomi Rupiah

Explains how to check the security features of Indonesian banknotes, drawn as diagrams marked SPESIMEN by law

Screenshots
banknote denominations explained feature by feature
10
security mechanisms drawn as cited diagrams
8
licensed photographs of figures and motifs
27
photos of banknotes anywhere on the site
0
On this page

The problem

Bank Indonesia teaches the public a "3D method" for checking banknotes: Dilihat, Diraba, Diterawang (look, touch, hold to the light). Almost everyone can recite the three words. Far fewer can say what a watermark physically is, why intaglio ink feels raised, or what sits inside a security thread. A fourth check, kode tuna netra, the raised marks that let blind people identify a note by touch, is barely taught at all.

There is a legal catch. UU 7/2011 Pasal 24 ayat (1) prohibits imitating the rupiah, up to a year in prison and a Rp200 million fine, unless the reproduction is educational and marked "spesimen." Ayat (2) separately bans distributing imitation notes. I treated both as engineering constraints: teach the mechanism without ever producing anything that could pass for a note.

What I built

The first real work was legal groundwork and the SPESIMEN marking, before a single note was drawn, since adding legal guarantees after the visuals existed would have been far riskier. The mark is drawn into the shape data of every note diagram, in the same space as the note's outline, so it survives screenshots, printing and any attempt to hide it with styling. The site has no way to produce an unmarked note-like image.

The build fails if a drawing breaks the rules

Nine automated checks run against the rendered output before every build. They confirm there are no photos of banknotes anywhere in the repository, every diagram carries its SPESIMEN mark, every diagram stays smaller than an actual note, and no export can produce a full note. If one fails, nothing ships. I kept the diagrams simple and never photorealistic, because realism itself would defeat the legal exemption.

I drew every mechanism as a diagram

Each security feature has a hand-drawn cross-section: watermark, security thread, intaglio, colour-shifting ink, rectoverso, microtext, UV ink and the tactile code, showing the mechanism better than a photo could. The colour-shift tilt demo, the UV toggle and a raking-light relief for the touch check all compute real light physics live in the browser, with a drawn fallback where they can't run.

Every claim cites Bank Indonesia, and the site never gives a verdict

Every fact about features, denominations, heroes and motifs is structured data that must cite a source, usually a Bank Indonesia publication; the build fails if one is missing. For the newest 2022 series, I re-derived the data from Bank Indonesia's seven implementing regulations. Two of the seven featured figures have no written biography, because the encyclopedia I cite for them doesn't cover those two, and the site names the gap openly. The site explains how to check a feature, never how to make one, and has no camera or "is this real?" button, since that authority belongs to Bank Indonesia.

Photos of people are allowed, photos of money are not

Photos were banned outright at first. I then opened one narrow exception for the heroes on each note and the motifs on the back, since a person or a flower is not currency. The check keeps the two cases apart, so photos of notes are still blocked. Each of the 27 licensed photographs, covering 7 figures and 20 of the 21 described motifs, carries its credit and source.

Result

Anatomi Rupiah is live in Indonesian and English as a static site with no network calls at runtime. It covers 10 denominations: the 2022 series plus the three largest 2016 notes still in circulation. Open any note, click a numbered marker, and see a magnified view beside the mechanism diagram. A guided walkthrough of the 3D method ends by admitting that touch can't be shown on a screen, and sends the reader to handle an actual note. The site names itself a personal educational project under the Pasal 24 ayat (1) exemption, unable to judge whether any note is authentic. The initial build took about two days in August 2026; a second phase, including a dark-theme redesign, continued into September.

Under the hoodTechnical detail for engineers
  • Next.js 14 static export (output: 'export') on GitHub Pages, strict TypeScript, React, Tailwind, Zod, Vitest with Testing Library, pnpm. Fonts are self-hosted through next/font. No analytics, no CDN fonts, no 3D, image-processing or ML library.
  • docs/bi-reproduction-guidance.md records the BI reproduction guidance checked at the first milestone. Full-note downloads were cut outright, because a print-resolution note image edges toward the distribution that ayat (2) bans.
  • The SPESIMEN mark is SVG path geometry in the same coordinate space as the note outline, not a CSS overlay.
  • pnpm compliance:check runs nine checks: asset policy, SPESIMEN presence, size cap, loupe-region containment, hero-anatomy marking, export-surface limits, source policy, marking-implementation (the mark must be geometry, never an overlay) and dependency policy. Each check has tests for both what it must reject and what it must accept. content:validate rejects any claim without a citation.
  • Figure and motif photos (7 figures, 20 motifs, Wikimedia Commons public domain or CC-BY-SA) are hash-pinned like brand assets.
  • The optics demos are raw WebGL with GLSL fragment shaders computing thin-film interference, light transmission and raking-light relief on a plain quad. No note texture is uploaded to the GPU, since that would mean rasterising the SVG. Tilt follows device orientation on mobile and a slider elsewhere. A pedagogy pass shows the number the tilt colour comes from and discloses when the demo falls back to a simplification. Mechanism diagrams can be shared; the export-surface gate keeps full notes out.
  • The 2022 series data is re-grounded on Peraturan Bank Indonesia 24/8 to 24/14/PBI/2022, which closed a gap in tactile-code coverage.
  • Each of BI's checks keeps one hue sitewide: Dilihat teal, Diraba copper, Diterawang amber, UV violet.
  • About 15 accessibility commits fixed skip-link focus, duplicate announcements, touch-target size, contrast and non-reflowing demo panels. A later SEO pass added canonical URLs, hreflang, per-page previews, sitemap and robots.
  • CI gates deploy on compliance, content validation, typecheck, lint and tests. Code is MIT; content is CC BY-NC-SA 4.0.
  • About 11,000 lines of TypeScript. The largest part, about 3,900 lines in lib/, is compliance, schematic geometry, WebGL and the citation system. 16 test files, 111 tests, 58 of them exercising the compliance gate. 99 commits between 13 August and 26 September 2026.

Screenshots

Beranda
Lembar
Ciri dan Kerja
3D
Kode Tuna Netra
Tokoh dan Motif

Hiring, or building something similar?

I'm open to full-time roles and select freelance work.