Web Audio: sound made of code, Kerem Okul

The brief

A friend is opening a Turkish sarma shop in Seoul. The site had to speak to Korean customers first (Korean by default, English and Turkish one tap away), feel as friendly as the brand's smiling sarma mascot, and make a dish most Koreans have never tried feel worth crossing the city for. The brand kit arrived in pieces while the site was being built, so every scene had to work with placeholders and take the real files later without a rebuild.

What I built

One long page you scroll like a meal:

• The hero. The mascot is held by the logo's chopsticks, which pinch it every few seconds. Its eyes follow your cursor.
• The unroll. A sarma lies on its leaf and unrolls to the right as you scroll; the ingredients come out from underneath. Hover or tap an ingredient for its card. Click it and it reacts in its own way: the lemon squirts, the mint breathes a cold breeze, the onion cries.
• The spin. A 360° turn of the sarma while the brand's claims appear around it. It is drawn in code for now and will play real turntable footage frame by frame once the video is shot.
• The menu. Dealt from a cup that becomes the photo on the first menu card.
• The Silk Road. An illustrated map from Anatolia to Seoul. The mascot walks, swims the Caspian, rides a camel through the Karakum, rolls itself into a sarma for a stretch, and takes a boat across the Yellow Sea.
• The extras. Five hidden stickers to collect, a character who wanders around the visit card, and small surprises for night owls and Korean holidays.

Smooth on every screen

All of it is built for phones as much as for desktops: on a narrow screen the unroll turns ninety degrees and the map camera follows the mascot. It stays smooth on modest phones, and people who prefer reduced motion get a calm version of the page.

Status

In preview while the shop gets ready to open. Copy, menu and the turntable video are still on their way from the brand team.

The brief

Mina is a graphic designer in Istanbul: brand identity, print and publication design. Her work is made of type and paper, so the site had to step back and let the pages breathe, in Turkish and English with equal weight.

What I built

• Language. A bilingual site with its own URL tree for each language, so a Turkish client and a foreign publisher both land on a page written for them.
• Structure. A grid of projects, each with its own page: identities, annual reports, picture books, pitch decks.
• The opening. The word "design" cycles through dozens of languages and scripts, from Korean to Arabic to Georgian. A nod to her publishing work.
• Motion. Smooth scrolling, kept quiet so it never competes with the work.

How

Next.js, with Turkish and English routing and metadata for each language. I also look after the content: she sends the work, I lay out each project page so it reads like a spread from one of her books.

Status

Live. The project pages are waiting for her final work; the structure is ready for it.

The brief

Introtema is a literary agency in Istanbul: translation rights, international publishing grants, book fairs, and a translation studio. The site has to work for very different visitors at once: foreign publishers browsing catalogues, authors, cultural organizations, journalists.

What I built and look after

The whole site, from structure to the last page:

• Reading paths. Fiction, nonfiction and children's catalogues; author and publisher pages; grants, licensing and translation services.
• Fairs and press. A fairs-and-events section and a press page.
• Found in Translation. You flip through the covers one book got in different countries.
• Day-to-day. Introtema is my day job, so the site is not a handover but something I keep running: new deals, fair stories, new catalogues.

How

WordPress, so the team can publish news and catalogue updates without a developer, plus contact and enquiry forms for publishers and authors.

Who it's for

Small brands, shops and restaurants, studios, designers and agencies. Anyone whose website should feel like them, not like a template.

What you get

• Design and development, start to finish, by the same person.
• Responsive layouts checked on real phones, not just a resized browser.
• Multilingual sites with proper pages for each language. I have shipped Turkish, English and Korean.
• Content you can edit yourself where it makes sense (WordPress or a simple CMS), or a static site when it does not need one.
• Speed and search basics done properly: clean HTML, structured data, sitemaps, images sized for every screen.
• Hosting and domain setup, and the keys handed over: the code, the accounts and the domain are yours.

What makes it different

Motion with a purpose. A scroll that tells a story, a detail that reacts when you touch it, a small game hidden in a footer. Used where it helps, never where it slows things down.

Examples

Sarma 사르마 (brand site, Seoul), Mina (designer portfolio, Istanbul), Introtema (literary agency).

How it starts

Play the Co-op card and tell me what you have in mind. A rough idea is enough.

Who it's for

Founders with an idea to test, teams that need a tool their spreadsheet has outgrown, products that need a front end people enjoy using.

Built so far

• A CRM that feels like Excel, for a private company: an editable grid with undo for everything, roles, daily backups, an activity log, and statistics that open the rows behind every number. Moved from a local database to the cloud without the team noticing.
• A collections and invoicing dashboard, for a private company: overdue alerts, multi-currency totals, forgiving Excel import, and invoices generated as Word documents right in the browser.
• A searchable newsletter archive, for a private company: years of PDF newsletters, searchable by book, author, publisher and date, with a built-in PDF editor to merge, clean and export.
• A meeting scheduler for B2B events: profiles, time-slot booking with automatic table assignment, realtime notifications, messaging and an admin panel with exports.
• Apps people use every day: a shared calendar-and-chat app for two, a desktop film diary with stats, a pixel-art habit tracker.

How I work on it

• Scope first. We cut the idea down to the smallest version that proves it, and write it down before any code.
• A working version early. You click through the real thing, not mock-ups, from the first weeks.
• Stack. React and Next.js with TypeScript; Firebase (Firestore, Auth, Hosting) or Supabase (Postgres, realtime, storage); Node and Express on Cloud Run; Excel, PDF and Word files generated in the browser; installable PWAs and desktop apps with Electron.
• Interfaces. The part users touch gets the same care as a brand site: responsive, fast and pleasant to use.
• Handover. Clean code you own, documented, deployable without me.

How it starts

Play the Co-op card with a few lines about the idea and who it is for.

What this is

• Pages where scrolling moves a story forward.
• Product launches you can play with.
• Mini games for a brand or an event.
• Sound designed in code.
• Physics you can push around.

Proof

• This site. A card game you have been playing.
• Pişti. A Turkish coffee-house card game against a stubborn uncle.
• Ghost Curve. An easing game.
• Sarma. A brand story told by unrolling a sarma.
• Web Audio and Canvas experiments. Every sound here is synthesized in the browser; every dot on the canvas card is a spring.
• The Hollowed. A Unity prototype in progress: a dark idle game where you aim and fling enemies with physics.
• A word-game helper. Reads a board from a screenshot with on-device computer vision, then runs an algorithmic search over a 64,000-word dictionary (a GADDAG) to rank every legal move.

Tools

GSAP and ScrollTrigger, Canvas, SVG, Web Audio, Pointer Events, Astro or plain HTML when a framework would only get in the way. Outside the browser I make games in Unity and Godot.

Something else

Something is being built in the dark. Please don't knock.

Built to perform

Animation only charms when it is smooth, so I test on slow phones and throttled processors. It respects reduced-motion settings, and the text stays readable by search engines and screen readers underneath the show.

How it starts

Play the Co-op card. "I want people to play with our launch" is a fine opening line.