Latticeworks Studio
Three projects. One idea.
Case studies
All three started with the same problem. The most important claim was the one nobody could check. In all three, we made that claim visible, so anyone can check it.
A freight company says it covers India's ports. A security analyst says they understand what malware does. Both claims are true, but nobody can check them, and every competitor says the same thing. A wedding site makes a quieter promise: every answer reaches the couple, and the guest list stays private. Better adjectives do not fix this. What works is showing the real thing, in enough detail that a reader can check it.
The first site is built around a real map of thirteen ports and depots and sixteen shipping routes, each in its true place. The second is built around three case files with private details removed, each in the same five parts and each opening on its own chart. The third is built around a guest list that unlocks on Google's servers, never in the page itself. Different fields, same approach. Read them in order or one at a time. They are numbered, and the list below links to each one.
- The map is the proof (Sandook Logistics)
- One loud signal, everything else quiet (Lloyd Sato)
- Beautiful on top, solid underneath (Ann Sweety & Maschio)
All three sites are live. Every number here can be counted on the live site. None of them is a result we claim for a client.
Back to selected work
The map is the proof.
001 · Sandook Logistics
- Client
- Sandook Logistics Pvt. Ltd.
- Sector
- Freight and customs
- Year
- 2026
- Scope
- Logo repair, website, build
sandooklogistics.com
Every freight company's website says it ships through India's ports. Anyone can say that, so it convinces no one. We drew the network instead.
Sandook moves sea, air, inland and project freight through its own offices and customs teams. For a shipper, one question matters most: which ports do you use, and where do they ship to?
So the centre of the site is a map, not a paragraph. It is a real map of India, with thirteen ports and depots in their true places and the sixteen routes that leave them. It is a claim you can check, not one you have to trust.
The map
The finished map: thirteen Sandook ports and depots in India, nine by the sea and four inland, and the sixteen routes that leave the coast for North Europe, the Americas, the Gulf, Africa, the Far East and Australia.
India drawn from Natural Earth data, simplified to about 500 points, in our own colours. The routes draw in as you scroll.
The repaired Sandook logo
The numbers
- 13 Ports and depots
Nine seaports and four inland depots, each in its true place - 16 Shipping routes
Every route checked against the outline of India before launch - 17 Client logos
Each in its own colours, on its own white tile - 0 Build steps
One HTML file, one stylesheet, one script. Nothing to compile
What we did
- The logo, repaired
The logo arrived damaged. It had a white halo, one wing was split in two, and both fell apart at 40px. We traced the good wing, smoothed it and mirrored it. The result is 7.9 KB, sharp at any size, and symmetric. - The map
Thirteen ports and depots, sixteen routes and six labelled exits. Each one is interactive, not a flat picture. Point at any route to see its full path. On screens under 1180px wide, the map scrolls sideways instead of shrinking, because tiny labels help no one. - One typeface, three jobs
Archivo is set wide for headings and narrow for data. Hanken Grotesk is for reading. Text sizes change at five fixed points, not smoothly with the screen. Both fonts are hosted on the site itself, with no outside font service. - Three animations, nothing more
Headings lift into place, a fixed panel slides between industries, and the map draws itself in. On a phone, only two of the six industry images load, because six full-screen images at once is too much.
The finished site
Four views of the finished site: the top of the home page, the network map, the services board, and the industries panel as it slides between sectors.
Home · top of page
Network · map
Services · board
Industries · sliding panel
Phone · the same three animations, sized for the device
The standards
- All text meets 4.5:1 contrast, on the dark background and on the map.
- Turn off scripts or motion and the page still looks finished. Nothing gets stuck halfway through an animation.
- Photos are resized to 1280px, so a phone downloads 838 KB instead of 1,278 KB.
- Every industry panel prints well, and the map redraws in colours that work on paper.
The site is static: one HTML file, one stylesheet, one script and two fonts, all on the same server. To publish it, you just copy the files.
One loud signal. Everything else quiet.
002 · Lloyd Sato
- Client
- Lloyd Sato
- Sector
- Cyber security and threat research
- Year
- 2026
- Scope
- Brand, design system, 3D scene, build
lloydsato.com
A security analyst's job is to find the one real threat in a lot of quiet data. So the site is built the same way: a near-black page, white type set large, and one orange accent that only ever covers a small part of the screen.
Lloyd studies what malware does in memory and turns it into clear advice a business can act on. The work is confidential. All that can be shown is the method, and every competitor claims a good method too.
So the site shows evidence instead. Three case files, with private details removed, follow the same five parts: briefing, threat model, method, findings and impact. Each one opens on its own chart, drawn only from numbers the file states. Behind the page, a 3D scene works through one security incident as you scroll: a warning is found, studied, walled in and closed. At the bottom, the page is back on the picture it started with, because the watch never ends.
Techniques per tactic, redrawn
How many techniques were seen for each tactic. Defence evasion has more than twice as many as any other tactic, so the review starts there.
- Defense Evasion (TA0005): 9
- Execution (TA0002): 4
- Discovery (TA0007): 4
- Command and Control (TA0011): 3
- Persistence (TA0003): 2
- Credential Access (TA0006): 2
- Collection (TA0009): 2
- Impact (TA0040): 2
- Privilege Escalation (TA0004): 1
- Exfiltration (TA0010): 1
Case file CF-002 · source: CF-001 sample set
The numbers
- 3 Case files
Each in the same five parts, and each opening on its own chart - 30 Techniques mapped
Seen across ten ATT&CK tactics, shown in one chart - 24 Skills listed
Ranked as production, applied or lab, by a mark and a word, never by colour alone - 0 Outside requests on load
Fonts, GSAP, Lenis and three.js all come from the site itself. Only the contact form reaches another server, when you press Send
The palette
- ground #08090c: the page. Near-black, never pure black
- ground-2 #11131a: raised panels, cards and the form
- ink #f4f5f7: headings and reading text
- bone #d8d3c7: the wall in the 3D scene. Rare, small, never a background
- signal #ff4b1f: the one accent: the threat, the key finding, buttons and focus
What we did
- From five pastels to one orange
The first version used five soft pastels on a violet-grey page. It was calm, but it could have been anyone's. The rebuild has one accent, a flare orange, on a near-black page, and keeps it to a small part of any screen. There is no green for success and no red for error. An error shows the orange with an icon and words, so colour never carries the meaning alone. - A watch floor behind the page
A watch floor is the room in a security centre where someone is always on shift. Behind the whole site is a 3D drawing of one: rings and lines like a radar screen, with a sweep that keeps turning. Scrolling works one incident on it, in the order a real response runs. Only the threat, and the ripples it sends out, are drawn in orange. The page ends on the same frame it opens on. - One chart for each case file
Each case file has one chart, drawn only from numbers the file states. CF-001 is a grid of techniques, CF-002 a ranked tally, CF-003 five steps on one line. The same chart appears on the home page, in the index and at the top of the file. CF-003 is five equal steps, not a funnel, because the file gives no numbers a funnel could show. - Two fonts, and a third for numbers
Archivo, heavy and in capitals, is for headings. Geist is for reading. Geist Mono is only for labels and numbers, so figures line up. Accent words are the same Archivo in italic outline, not a borrowed serif. Four font files, all hosted on the site, cover everything.
The finished site
Each screenshot is the live page with motion on, taken once the 3D scene has settled. Read in order, the seven home page views follow one incident on the floor: it is spotted, studied, walled in and closed, and the last view is back on the first frame.
Home · top of page
Home · what I do
Home · case files
Home · background
Home · capability
Home · experience
Home · open a channel
CF-001 · top of the file
CF-002 · method
Case file index
The standards
- Turn off scripts and every section is there and readable. If the animation code fails to load, a CSS backup shows the page after 3.5 seconds.
- A pause button in the header stops the 3D scene, the moving strip and the smooth scroll together, and every page remembers it. With reduced motion on, there is no 3D at all, only a still picture of the floor.
- The 3D scene loads after the page has appeared, and not at all on low-memory devices or with data saver on. The still picture is made from the scene's own first frame, so nothing looks missing.
- The faintest grey text is 5.5:1 or better on every flat background, and the orange is 5.2:1 or better. On a touch screen every target is 44px both ways.
Seven pages and a 404, written by hand in HTML. One shared stylesheet and one shared script, with GSAP, Lenis and three.js copied onto the site rather than linked from another server. No build step, no bundler. To publish it, you copy the files.
Beautiful on top, solid underneath.
003 · Ann Sweety & Maschio
- Client
- Ann Sweety & Maschio
- Sector
- Wedding invitation and RSVP
- Year
- 2026
- Scope
- Art direction, website, build, RSVP system
annsweety-weds-maschio.online
People judge a wedding invitation by how it looks: the names, the gold, the time. Nobody thinks about the guest list behind it until it loses an answer, or shows one to a stranger.
Ann Sweety and Maschio's wedding in New Delhi needed a site with two jobs. First, to be the invitation: the names, the families and the plan for the day. Second, to be the place where every guest replied, on whatever phone they used.
On the surface, it is warm cream paper, dark brown ink and soft bronze, set in Fraunces over a slowly moving silk background. Underneath, it is a private Google Sheet. Every reply from every device goes into it. The dashboard that shows the replies unlocks with a passcode that is checked on Google's servers. The passcode never appears in the page a guest can see.
The palette
- paper #f8ead0: the page, and the invitation on it
- paper-2 #f1ddb4: the countdown's own band
- ink #2a1a06: every word set on paper
- ink-soft #7d5a28: small labels, dates and addresses
- ink-2 #1a1103: the answer, the menu, the curtain
- bronze #cf8a0e: highlighted words, at rest
- bronze-soft #eab13c: the shine, and gold on dark
The numbers
- 5 Numbered sections
Invitation, countdown, the day, the answer and the wishes, in the order a guest needs them - 2 Events, one venue
Each with its own map and calendar file, in the venue's local time - 6 Parts in the Excel file
The Excel download is a real workbook, built in the browser by the page's own code. No library - 0 Passcodes in the page
The guest list unlocks on Google's servers. View source and there is nothing to find
What we did
- The golden hour, as a palette
Warm cream paper, dark brown ink and soft bronze: seven named colours, none of them pure white or pure black. Fraunces sets the names at its largest size, and Manrope is for reading. Highlighted words get a gold shine that sweeps across once as they appear, and stays still when reduced motion is on. - Silk, without a library
The background is one full-screen shader that draws moving silk, with 110 specks of gold dust drifting over it. It uses WebGL directly, instead of loading about 590 KB of Three.js before the names can appear. Where WebGL is not available, the canvas steps aside and the paper background still shows. - A guest list the page cannot open
Replies go to a private Google Sheet through a short Apps Script. The passcode is stored in the script's settings and checked as a SHA-256 hash on Google's servers. If no passcode is set, every private request is refused, so it never fails open. A guest who replies twice updates their own row instead of adding a new one. - Clean on the way in, encoded on the way out
Every name and wish is cleaned first. Invisible characters, control characters and text-direction tricks are removed. Then the text is made safe for wherever it goes next: HTML for the wish wall, XML for the Excel file, a protective apostrophe in the CSV, and plain-text cells in the Sheet. A guest's name can never run as a formula in the couple's spreadsheet.
The finished site
Each screenshot is the live page with motion turned down, showing its final state. The clock is set a month before the wedding, the way guests saw it while the site was in use.
Home · the names
No. 01 · the invitation
No. 02 · the countdown
No. 03 · the day
No. 04 · the answer
No. 05 · the wishes
Footer · see you there
Guest list · locked
Phone · the reply button one tap from the names
The standards
- Turn off scripts and you can still read the whole invitation. If the code never starts, a backup opens the curtain after six seconds.
- With reduced motion on, the loading animation never plays, the gold shine stays still and the scrolling banner stops.
- The countdown uses New Delhi time, so every guest sees the same moment, wherever they are.
- Scripts come only from the site itself and two CDNs locked with SRI. The one inline script is allowed by its hash.
One page of hand-written HTML on GitHub Pages. The names, dates and events live in one settings file. The only server is a short Apps Script next to a private Google Sheet.
Three claims you can check.
Back to selected work · Start a project