Kshitij Bhatnagar
  1. Kshitij Bhatnagar
  2. Case studies
  3. Flipp Tripp

Flipp Tripp

The studio had no showreel to lead with, so its first website leads with a split flap board of verified facts.

Pre launch: review build waiting on the owner's confirmations; a requested new look has not started

Research, design contest and buildBrand film productionDirected research, design and build2026

  • 42 of 42 acceptance checks pass on the review build, reading the served pages with JavaScript off, 25 Oct 2026.

    Measured, source 1
  • 0 cookies set when the home page loads, with 0 stored items and 0 third party requests.

    Measured, source 2
  • 1.04 s for the home page's split flap board to settle once, then 0 flaps in the next 6.06 s with no input.

    Measured, source 3

    One unthrottled lab session at 1440 by 900.

  • 33 of 44 review findings held up under a second, adversarial check, and all 33 were fixed the same day.

    Measured, source 4

How one flap turns

Every tile on the studio's board is modelled on a physical flap. Step through one change by hand, then type your own words onto a board that keeps the same timing. I wrote this board fresh for this page; it is not the client's code.

Step through one flip

Example flip: F to T, through one random glyph, 7. Example, source 5

Illustration, not a screenshot

Each step is 110 ms: the old leaf folds for 55 ms, then the new one lands for 55 ms. This example takes two steps, F to 7, then 7 to T. Measured, source 5

  1. 0 ms

    F at rest.

  2. 30 ms

    The old top leaf falls under its shade.

  3. 55 ms

    Edge on: the top half shows 7, the bottom half still shows F.

  4. 110 ms

    7 has landed. A second step, 110 ms more, lands T.

One flip in four moments, drawn for this page. Example, source 5

Turn on JavaScript to step through the flip.

  1. At rest a tile shows two halves of one glyph. When it changes, the top half behind the old leaf already holds the next glyph. Measured, source 5
  2. The old top leaf folds down about its bottom edge, darkening as it turns. At 55 ms it stands edge on and disappears. Measured, source 5 Reported, source 6
  3. The new bottom leaf unfolds from edge on and lands over the old bottom half as its shade lifts. One step takes 110 ms. Measured, source 5
  4. A press runs each changed tile through one random glyph from a pool of 37, then the new letter: two steps. The first settle runs two to four random glyphs before each letter. Measured, source 5

Type a word

A to Z, 0 to 9 and &, on two rows of 12. Rows break at a space. The example is the studio's own line.A to Z, 0 to 9 and &, on two rows of 8. Rows break at a space. The example is the studio's own line.

Only changed tiles flip, 35 ms apart by column, with one random glyph before each letter. Under reduced motion the words swap at once, as they do on the studio's board. Measured, source 5 Measured, source 3

Turn on JavaScript to type on the board.

Measured on the review build

I timed the studio's board on its review build, in headless Chromium on 25 Oct 2026, unthrottled at 1440 by 900, with every request to another host blocked and counted. Measured, source 3

Seven stacked frames of the second row of the studio's board: it reads CAMPAIGNS, then tiles from the left pass through random glyphs, some mid fold under a shade, and the last frame reads EVENT CONTENT.
One press on the review build, frame by frame, then the landed row. Only the tiles that change flip, from left to right. Capture: Flipp Tripp review build, 25 Oct 2026, shown with the owner's OK

One press

  1. Press 0 ms
  2. First new flap 46 ms
  3. Last new flap 512 ms
  4. Still 622 ms
  5. Spec cap 650 ms
A press flips only the tiles that change: 38 flap layers, then nothing. The board is still at 622 ms, inside the spec's 650 ms cap. Measured, source 3 Reported, source 6

First load

  1. Settling 1.04 s
  2. Still, with no input 6.06 s
  3. WCAG 2.2.2 threshold 5 s
The home board makes 94 flips across its 26 tiles and is still 1.04 s after its first flap. No tile flipped in the next 6.06 s. WCAG 2.2.2 asks for a pause control only when automatic motion lasts more than 5 s, so the board needs none. Measured, source 3 Reported, source 7

0 cookies set by the home page load. Measured, source 2

0 stored items in local or session storage. Measured, source 2

0 third party requests with every other host blocked and counted. Measured, source 2

Films load only on a press: nothing is requested from Vimeo, YouTube, Instagram or Google before one. Measured, source 1

Nothing to point at

12 OCT 2026

The studio had no website. None of its public channels gave an email address, a phone number or a postal address, and its only active channel was Instagram.

There was no showreel, no logo master, no colour file and no set of film masters. The only logo was a small social media avatar. Searching the name returned mostly namesakes, including travel businesses that hold similar trademarks.

At the start I launched a research workflow of 17 agents, alongside the first build: five tracks and three follow up passes, each with fact check verdicts. The brief states as fact only what the fact check agents verified or two registries agreed on. Reported, source 8 Measured, source 7

It mapped the legal ground early. Under Indian copyright law, a film made for payment belongs first to the client who commissioned it unless they agree otherwise, so every commissioned film needed its client's written permission. The business behind the brand was checked against public registries, and no legal page names an operator until the owner confirms who runs it. Reported, source 7 Measured, source 1

It also found that Apple's SF Pro licence forbids use on websites, so the site sets Inter with optical sizes, at type values read from apple.com's own stylesheets.

  • 15standards and legal sources checked, from web vitals and WCAG 2.2 to Indian privacy rules and copyright. Measured, source 7
  • 11items on a list of what never to state as fact. Measured, source 7
  • 16 and 16questions for the owner, ranked by impact, and risks, each with a mitigation. Measured, source 7
What the research brief put on the table, 12 Oct 2026.

The showreel that did not exist

12 OCT 2026

The obvious way

Lead with the films: a showreel at the top, then the work.

What it would cost

There was no showreel, no film master and no logo file to design from, and every commissioned film needed its client's written permission before it could appear. A site built around footage would have waited on all of it.

16 firm items with a published credit, each waiting on the owner's confirmation of rights, plus 11 possible items. Measured, source 7

With nothing to play, the verified facts became the picture.

What I built

A studio information board. Its verified films, dates and credits sit on split flap boards that settle once and then wait. When the owner supplies a film master, it drops into its row without a redesign.

A site that cannot say too much

EVERY BUILD

A launch build may state only what has been confirmed, and the code enforces it.

The launch gate

Only a real domain makes a build indexable. If an indexable build starts while any owner confirmation is missing, it fails with an error that lists each one, including the operator, the grievance officer, live email delivery, every client's written permission and the launch date. Review builds stay out of search.

Recreated for this page
Launch gate: operator not confirmed;
grievance officer not named;
enquiry email delivery not live;
no permission from a client;
launch date for Privacy and Terms not set.
The gate's error message, recreated with names removed and the list shortened.

Legal text from confirmed facts

Privacy and Terms are generated from configuration. The operator, the grievance officer, the courts and the liability clauses render only once confirmed, and a draft note says so until then. Confirming a fact switches its sentence on across every page in the next build.

Names behind consent

People are stored with a consent flag, and credits are filtered on the server, so an unconsented name never reaches a page or a browser bundle. Held cases live in a file that nothing imports, and their addresses return 404. The checks scan every served byte and every bundle for leaks. Measured, source 1

4 people stored in the code, shown on no page until they consent. Measured, source 9

2 held cases kept in a file that nothing imports. Measured, source 9

An honest offline form

Until the operator, the inbox and email delivery are confirmed, Send is disabled and a note points visitors to Instagram. If the server is reached anyway, it stores nothing and answers with the same note. In offline mode, success is never faked.

Privacy without a banner

Films load only on a press, through Vimeo's do not track mode and YouTube's privacy enhanced domain. Fonts are self hosted, no cookie is set and nothing is stored, so the research brief plans no consent banner at launch, with a fresh check due before India's new data protection duties start on 13 May 2027. The Privacy Policy describes what the build does, and the stage above shows the measurement. Reported, source 7 Measured, source 2

Ready to be found at launch

AT LAUNCH

None of this reaches search yet. Review builds are noindex, and reach opens only when the site launches on a real domain.

At launch the studio gets its first front door: an enquiry route, and a title, a description and a canonical address on every published page.

The review build's home page: a split flap board reading FLIPP TRIPP over BRAND FILMS with a Press to flip hint, the heading “Stories first. Production next.”, a line about the studio's films and two buttons, See the work and Start a project.
The home page on the review build, after its board settled. The heading is the studio's own line. Capture: Flipp Tripp review build, 25 Oct 2026, shown with the owner's OK

Search engines and AI assistants get the same facts as structured data: the organisation, the site, its pages, each case, one film and the breadcrumbs, and never Person, Review or AggregateRating. An llms.txt file says plainly that the studio is not a travel agency.

The name sits beside travel businesses, so the site speaks in film words. The winning concept gave up its name, Departures, and became The Board. The 404 page reads “This frame didn’t make the cut.” A check fails on any travel word outside a short allowlist. Measured, source 1

7 pages in the sitemap: Home, four case pages, Privacy and Terms. Measured, source 1

6 types of structured data across the site. Measured, source 1

5 share images generated at build time, for Home and each case. Measured, source 1

Built, judged and rebuilt in one day

12 TO 25 OCT

The first board was wrong, and the process caught it.

I started building alongside the research, on the scaffold of Post Aura, another site I was working on at the same time. That first hero cycled forever behind a pause button. In the design contest, the design judge agent flagged it as ambient motion and a flash risk, at about nine flips a second per tile across 26 tiles. Reported, source 10

  1. 12 Oct 202609:36 IST

    v0 foundation

    Tokens, content, a first flap board, and a hero that cycled forever behind a pause button.

    Building started alongside the research, on the Post Aura scaffold. git 9bb04ab Measured, source 11

  2. 12 Oct 2026

    Design contest

    Three concepts, three judge agents. Departures won with 8.0, 8.1 and 8.5 and was renamed The Board.

    The judges flagged the endless cycle, per tile React state and timers, and travel labels. Reported, source 10

  3. 12 Oct 202610:29 IST

    v1 spec build

    Rebuilt to the spec by five builder agents on separate files: the one clock flap engine, gated legal pages and the acceptance script. First deploy, with 42 of 42 checks green.

    Ship the winning concept with every must fix item. git 0031073 Measured, source 11 Reported, source 8

  4. 12 Oct 2026

    Copy pass

    Removed five unverified marketing lines and every unverified place and runtime.

    Only verified facts ship, and the checks fail if a removed line returns. Reported, source 6 Measured, source 1

  5. 12 Oct 202611:57 IST

    v1.1 review fixes

    44 findings proposed, 33 confirmed and fixed: 3 blocker, 7 major, 23 minor.

    Make the build match the spec in real browsers, at real zoom levels and with every input method. git 2458c5a Measured, source 4 Measured, source 11

  6. 23 Oct 2026

    New look requested

    The owner asked for a new look, based on a portfolio he liked.

    Owner preference. Not started. Reported, source 8

  7. 25 Oct 2026

    Verified again

    42 of 42 checks passed against the review build again, and the home board's motion and the home page's privacy were measured in headless Chromium.

    Fresh, dated evidence for this page. Measured, source 1 Measured, source 3 Measured, source 2

The contest

Three concepts went to three judge agents, one lens each: design, brand and engineering. Between them the judges wrote 49 must fix items, some overlapping, and 37 grafts. The spec took every must fix item and a selection of the grafts: the press that turns STORIES FIRST into YOUR STORY FIRST came from The Keynote Cut, the Show all credits view from The Flip Side. Measured, source 10

Scores from three judge agents, 12 Oct 2026. Reported, source 10
ConceptDesignBrandEngineering
DeparturesWon, renamed The Board8.08.18.5
The Keynote Cut777
The Flip Side6.56.55.5

The spec build answered them. One shared animation clock replaced per tile React state and timers, every board settles once and then waits, and the travel labels gave way to film words.

The review

Five review lenses proposed 44 findings. A second pass then checked each one, mostly by reproducing it in a browser: 33 held up, and 11 were rejected as behaviour the spec intended. All 33 were fixed the same day: 3 blockers, 7 major and 23 minor. Four of them taught me how the parts work. Measured, source 4

  1. Major

    Only the first flap of each tile animated. Measured, source 4

    Cause
    Each step's cleanup came due at the same instant as the next step, so it erased that step's layers.
    Fix
    A cleanup now checks that it still owns its layer.
  2. Minor

    The one animation loop multiplied: 2,483 frame requests over 96 frames, up to 50 in a single frame, across three presses. Measured, source 4

    Cause
    The loop cleared its own flag before running jobs, so any job that scheduled work started a second loop.
    Fix
    The flag stays set while jobs run, and a failing job cannot stall the clock.
  3. Blocker

    Board labels stayed blank on phones. Measured, source 4

    Cause
    Their settle waited for 25% of the board to be visible. Opened in full, the board grew to 4,005 px, and an 844 px screen can show at most 21% of it.
    Fix
    The settle now starts from the board's top edge.
  4. Major

    In page links scrolled but left keyboard focus behind. Measured, source 4

    Cause
    The new scroll handler in Next.js 16.3 leaves focus where it was, by design.
    Fix
    Same page links became plain anchors, so the next Tab starts where the page scrolled to.

Going live is configuration

NEXT

The build needs only the owner's confirmations to launch; the requested new look has not started.

5 steps. Three for the owner, two for me. Reported, source 6

  1. Confirm what the gate lists, among them the operating entity, a grievance contact, each client's written permission and the launch date.Owner
  2. Name the inbox for enquiries and agree to an email delivery provider, which needs the site's domain verified.Owner
  3. Add three empty email settings to the project and its host.Me
  4. Paste the values in. Nobody echoes them back.Owner
  5. Set the site's domain, switch the confirmed flags on, rebuild, and run the 42 checks against it.Me

The way back: each confirmation is one setting. Set it back and its sentence leaves every page at the next build, and without the operator or any email setting, the form returns to offline mode. Reported, source 6 Measured, source 9

The contract

One command builds the site, serves it and runs 42 checks against the served pages with JavaScript off, and the same script runs against any address. Its rule sits at the top of the file: change it when the spec changes, never to make a failure pass. Measured, source 11

42 of 42 acceptance checks pass on the review build, reading the served pages with JavaScript off, 25 Oct 2026. Measured, source 1

The 42 checks by group, run against the review build on 25 Oct 2026. Measured, source 1
GroupPassedStatus
Routes4 of 4PASS
SEO9 of 9PASS
Structure and links6 of 6PASS
Copy17 of 17PASS
Served without JavaScript3 of 3PASS
Privacy and leaks3 of 3PASS

Small on purpose

The flap engine is 128 lines of TypeScript. The site runs on four runtime dependencies and builds to 20 static routes. Measured, source 5 Measured, source 11

What I learned

Tracing the board frame by frame taught me that a timer can outlive the step that set it. The focus bug taught me to read a framework's defaults before trusting them. And with thin public proof, trust has to come from exact credits and rules that refuse a guess, never from scale.

Get this for your business

Who it is for
Founder led studios and small brands that need a first website but have little public proof yet, and open questions about rights, consent or who runs the business.
What you get
A brief researched from public records and standards, a design chosen from competing concepts, a site built to written speed and accessibility targets with one signature interaction, search basics with structured data and share images, privacy and terms text built only from confirmed facts, a launch gate, and one command that reruns the acceptance checks.
What you need
Your confirmations: who runs the business, an inbox and a domain, and a grievance contact. Written permission from each client you want to show, consent from anyone on screen, and your master files: logo, films and stills.
Setup
On this project, research, design, build and review all happened on one day, 12 Oct 2026. Launch then waits only on your confirmations; switching on is configuration and a rerun of the checks.
Email me about this

kshitijbhatnagar97@gmail.com

No prices here. I scope each setup after I hear how your work runs today.

How these numbers were measured

Measured
Observed with a tool or a log.
Reported
A person or a document said it; the source names who.
Modelled
Computed from inputs shown on the page.
Example
An illustration or a default you can change.
  1. 1

    Acceptance run of the project's own check script against the review build, reading the served pages with JavaScript off, 25 Oct 2026. All 42 checks passed: routes 4, SEO 9, structure and links 6, copy 17, served without JavaScript 3, privacy and leaks 3. Among them: the sitemap lists exactly the 7 published pages, the structured data carries the 6 types the script expects, and share images render for Home and the 4 case pages.

  2. 2

    Home page load in headless Chromium 153 at 1440 by 900, unthrottled, with every request to another host aborted and counted; cookies and storage read 7 s after load. Run on 25 Oct 2026 IST (24 Oct 2026, 22:15 UTC). Result: 0 cookies, 0 local storage keys, 0 session storage keys and 0 third party requests attempted.

  3. 3

    Same session. A MutationObserver timed every flap layer added inside the home board, whose 26 tiles each add two layers per flip. On load: 188 layers, so 94 flips, the first at 1,324.8 ms and the last at 2,255.9 ms after navigation start, still 1.04 s after the first flap; then 0 layers in the next 6.06 s with no input. One click with no pointer movement: 38 layers, the first new flap at 46.1 ms and the last at 512.3 ms, still at 622 ms. Still time is the last layer plus one 110 ms step. With reduced motion emulated: 0 layers on load and on press, and the row text swapped at once. One unthrottled lab session, not field data.

  4. 4

    The project's adversarial review, 12 Oct 2026. Five lenses (bugs, accessibility, visual craft, performance and SEO, claims) proposed 44 findings; a second pass checked each one, mostly by reproducing it in a browser, and confirmed 33, rejecting 11 as behaviour the spec intended. Confirmed by severity: 3 blocker, 7 major, 23 minor. All 33 were fixed that day, as the project's optimisation record notes. The four findings described on this page are bugs 1 and 7 and accessibility 1 and 3. Counted on 25 Oct 2026.

  5. 5

    The client's flap engine, board component and tile styles, read 25 Oct 2026. The engine: 128 lines by wc, 110 ms a tile step, a pool of 37 glyphs (A to Z, 0 to 9 and &), one time ordered queue on one requestAnimationFrame loop that stops when the queue is empty. The board: the settle runs 2 to 4 random glyphs a tile, 35 ms apart by column and 120 ms by row, and a blank tile runs one random glyph; a press flips changed tiles only, through one random glyph and then the target, 35 ms apart by column. The styles: the fold and landing layers, each half a step long, with a shade on the moving leaf.

  6. 6

    The project's build spec, written from the design contest on 12 Oct 2026: the shade rising from 0 to 0.45 as a leaf folds (line 304); every board still within 1.2 s and a press within 0.65 s (lines 169 and 306); the offline enquiry mode and the steps for switching on (928 to 955); legal text gated by confirmation (957 to 979); and SEO, with 6 structured data types, 5 share images and a sitemap of 7 pages (1053 to 1121). The copy pass that removed five unverified marketing lines is in lines 765 to 770. Read 25 Oct 2026.

  7. 7

    The project's research brief, 12 Oct 2026: five research tracks and three follow up passes with fact check verdicts (line 3); the brand's public footprint (57 to 58 and 158); 15 standards and legal sources (108 to 124), among them WCAG 2.2 success criterion 2.2.2, which asks for a pause control when automatic motion lasts more than 5 s, and Copyright Act section 17(b); 11 items never to state as fact (126 to 137); the rule that no content item is published without the owner's confirmation of rights (178); 16 firm content items and 11 possible ones (180 to 215); the cookie plan, no banner at launch and a fresh check before 13 May 2027 (118 and 569 to 573); 16 owner questions and 16 risks (662 to 702). Read 25 Oct 2026.

  8. 8

    The project's own notes, read 25 Oct 2026: the decisions log (a research workflow of 17 agents with every track fact checked; the design contest; the owner's request of 23 Oct 2026), the progress log for 12 Oct 2026 (built on the Post Aura scaffold, five builder agents in parallel, 42 of 42 checks green locally and on the review build, review fixes deployed) and the mistakes and lessons log.

  9. 9

    The client's source code, read 25 Oct 2026: the launch gate in the root layout; the confirmation flags and the list of what is missing in the legal settings, with email delivery live only when the operator and three settings exist; 4 people stored with consent set to false, and the credit filter that runs on the server, in the work registry; 2 held cases in a file that nothing imports; and the site settings, where only a real domain makes a build indexable.

  10. 10

    The design contest results, 12 Oct 2026: three concepts scored by design, brand and engineering judge agents. Departures 8, 8.1 and 8.5; The Keynote Cut 7, 7 and 7; The Flip Side 6.5, 6.5 and 5.5. Across the three verdicts, 49 must fix items and 37 grafts, some overlapping. The design judge's note on the first build: its hero cycled forever behind a pause button, at about nine flips a second per tile across 26 tiles. Read 25 Oct 2026.

  11. 11

    The client repository, read 25 Oct 2026: its package file (four runtime dependencies, Next.js, React, React DOM and motion, and one check command that builds the site and runs the acceptance script); the acceptance script's header (its rule, line 20); the optimisation record (20 static routes in the production build, checks green before and after); and the git reflog, where commits 9bb04ab, 0031073 and 2458c5a landed at 09:36, 10:29 and 11:57 IST on 12 Oct 2026.

Credits

  • Screens of the Flipp Tripp review build, captured 25 Oct 2026 and shown with the owner's OK.