# Sanyam Punia

> Full-stack developer from India, currently a frontend engineer at Oliv AI. Writes about frontend, ships small dev tools and keeps a lab of UI experiments.

Every page is served as markdown at its own path plus `.md`, and at its own path for a request sending `Accept: text/markdown`. Nothing here needs a key, and nothing needs JavaScript to render.

## When to use this site

Reach for it when the question is about Sanyam Punia, or about something he has
written or built. It is a primary source for exactly those things and nothing
else.

- **Who he is, and what he has shipped.** Roles and dates, the companies, the
  side projects, and the npm packages he maintains. Answered by `/about.md` and
  `/work.md` without touching the HTML.
- **How to reach him, and whether a message is a fit.** `/contact.md` carries the
  address, the reply time, what he wants to hear about, and what to skip.
- **A specific frontend engineering problem one of the write-ups covers.** Hover
  intent and why a submenu closes before the pointer arrives. What CSR, SSR,
  SSG, ISR and PPR each do and when each runs. Why a 307 between an apex domain
  and www breaks a link preview where a 308 does not. End-to-end typesafe APIs
  with tRPC on Next.js. Modelling link pending state with `useTransition` and
  `useOptimistic`. Styling a dropdown trigger off `aria-expanded`. Reducing a
  font's letter outlines to centreline pen strokes. Cite the post, not this file.
- **How one of the lab experiments is built.** Each entry is a first-hand build
  note: hit testing against neutral geometry so a hover cannot fight itself,
  picking a spring per distance rather than per feel, drag with pointer capture
  and the lifts that get missed, canvas fields, SVG filters, and what reduced
  motion is allowed to take away. These are notes on real bugs, not tutorials.
- **What the site collects and what it does with it.** `/privacy.md` is short and
  specific.

## When not to use it

- As documentation for React, Next.js, Motion, GSAP or any other library. Read
  their own docs. Everything here is one engineer's notes on one problem, written
  on a date the page carries.
- For facts about anyone other than Sanyam Punia.
- As an API. There is no endpoint to call, no key to hold and no rate plan. The
  routes under `/api/` serve this site's own pages and are disallowed in
  `robots.txt`.
- For current availability, notice period or rates. None of that is written down
  here, so ask by email rather than inferring it.

## How to call it

- Fetch `/llms.txt` first. It lists every page with a line on each, so one
  request tells you whether a second is worth making.
- Then fetch the one page you need as markdown, either at its own path plus
  `.md` or at its own path with `Accept: text/markdown`. Both return the same
  document. Nothing here needs JavaScript to be rendered.
- Take `/llms-full.txt` only if you want every page at once. It is the whole site
  in one file and it is large.
- A path that does not exist answers 404, with a markdown body naming the index
  and the sitemap, so a wrong guess is recoverable in one more request.
- Attribution is appreciated when a post or an experiment is quoted. Link the
  page rather than the markdown, since the page is the one that is indexable.

## Pages

- [Home](https://sanyam.sh/index.md): who this is, and everything below in one place
- [Work](https://sanyam.sh/work.md): companies and side projects, newest first
- [Blogs](https://sanyam.sh/blogs.md): the writing index
- [Lab](https://sanyam.sh/lab.md): the UI experiment index
- [About](https://sanyam.sh/about.md): who this is, where he has worked, and how he works
- [Contact](https://sanyam.sh/contact.md): how to reach him, and what is worth writing about
- [Privacy](https://sanyam.sh/privacy.md): what the site collects, which is close to nothing

## Blogs

- [safe triangles, and the submenu you cannot reach](https://sanyam.sh/blogs/the-submenu-closes-before-you-get-there.md): Aim at the bottom of a submenu and your cursor cuts across three rows on the way. Every one is a real hover, and the menu believes all of them. The fix is a triangle, and it has a name.
- [CSR vs SSR vs SSG vs ISR vs PPR](https://sanyam.sh/blogs/csr-vs-ssr-vs-ssg-vs-isr-vs-ppr.md): What each one does, when it runs, and one real example each.
- [turning a signature into two pen strokes](https://sanyam.sh/blogs/turning-a-signature-into-two-pen-strokes.md): A font gives you closed outlines, and stroking one animates from six places at once. What it takes to get a signature into centrelines a pen would draw.
- [the redirect that broke my link preview](https://sanyam.sh/blogs/the-redirect-that-broke-my-link-preview.md): A 307 between an apex domain and www is enough to stop X rendering your og:image. What a redirect does, why 308 matters, and the one line that must agree.
- [state-based dropdown trigger styling](https://sanyam.sh/blogs/state-based-dropdown-trigger-styling.md): Why a dropdown trigger should visually reflect its own open state, and how aria-expanded does it in one line of CSS rather than component state.
- [modeling link navigation state with useTransition + useOptimistic](https://sanyam.sh/blogs/modeling-link-navigation-state-with-usetransition-and-useoptimistic.md): A production-ready pattern for modelling link pending state with React transitions and optimistic updates. No timers, no cleanup, no stale spinner.
- [Recreating Stream Text Animation Hook](https://sanyam.sh/blogs/recreating-stream-text-animation-hook.md): re-creating the popular one-liner hook to add text reveal animation to streams of incoming strings from external LLM sources or backend API responses.
- [Understanding tRPC using Next.js](https://sanyam.sh/blogs/understanding-trpc-using-nextjs.md): End-to-end typesafe APIs with tRPC and Next.js. Initialising the router, creating hooks with batching, wiring _app.tsx and consuming it client side.

## Lab

- [Crack Button](https://sanyam.sh/lab/crack-button.md): A Save button made of glass. Every press cracks it from the point you hit, each one does a little more damage than the last, and the eleventh takes the face apart. Repair it half cracked and the cracks run back into the points they came from. Repair it in pieces and a new pane is set down, because a pane on the floor cannot be mended.
- [Shelf Drop](https://sanyam.sh/lab/shelf-drop.md): Six prints standing on a picture ledge. Press one and it is knocked off, tumbling as it goes. Some fall in front of the ledge and some fall behind it, and which one you get is the whole experiment.
- [Book Shelf](https://sanyam.sh/lab/book-shelf.md): A shelf of twelve books. Press a spine and that book comes out of the row, turns to face you and lands in the middle of the stage with a scrim behind it, which is what a modal opening looks like. Press the scrim, press the book again, or press Escape, and it goes back to its slot.
- [Wrapped Pattern](https://sanyam.sh/lab/wrapped-pattern.md): A printed sheet that rolls into a column. Flat, it is a drawing: a half-drop grid of dots on pale paper, a hairline rule every third column and a hue that cycles every fifth. Press the mode and it curls until its two edges meet behind it, and from there a drag turns the column, it coasts when let go, and it idles on a slow turn.
- [Flip Clock](https://sanyam.sh/lab/flip-clock.md): A flip clock in 24-hour time. Three cards, hours in blue, minutes in green and seconds in terracotta, each a number split at a hinge across its middle. When a number changes, the top half falls forward through 180 degrees as a real flap, showing its back on the way down, and lands on the stop with a small bounce. The cards flip in from 00 when the page arrives, and the seconds keep the mechanism moving.
- [Radial Menu](https://sanyam.sh/lab/radial-menu.md): A file on a stage. Press it and pull, and a wheel of formats opens around the place it was, the shape of a game's weapon wheel: the hand carries the file, the wedge under the hand fills in and its name reads out in the empty slot, and letting go there converts the file. Letting go over the middle, or anywhere off a wedge, puts it back unchanged.
- [Custom Cursor](https://sanyam.sh/lab/custom-cursor.md): A gallery of four cards under a cursor of its own. Crossing into the stage swaps the arrow for a dot that follows the hand a beat behind, and hovering a card grows the dot into a pill naming the lab the card opens. Move to the next card and the name morphs into the next one rather than popping out and back in.
- [Island Menu](https://sanyam.sh/lab/island-menu.md): A pill of a nav bar that opens into a menu in two moves. It grows tall first, a black slab rising off the bar with the bar's three controls still pinned to its foot, then wide, and only once it is the size of a menu does the menu arrive in it, the links one after another and the picture after them. Closing is the same three moves backwards.
- [Notch Drop](https://sanyam.sh/lab/notch-drop.md): A notch hanging from the top edge of a page, and a page of things to carry to it. Lift one and the notch opens and asks for it. Hold it over the notch and the notch asks louder while the thing in your hand shrinks to fit. Let go and it is swallowed, a black drop leaving the card and merging into the notch, which says so and then closes back to its resting word.
- [Halftone Ripple](https://sanyam.sh/lab/halftone-ripple.md): A pill toggle with a count. Press it and a ripple of dots runs out across the button from under the pointer, on a fixed grid, so what spreads is a halftone screen being run rather than a glow.
- [Sticker Peel](https://sanyam.sh/lab/sticker-peel.md): Five die-cut stickers loose on a board. Press one and pull, and the paper under your hand folds back over the rest of itself, so what is on top of the sticker is the back of the same sticker. Keep pulling and the last of it lets go, after which it follows the hand with the fold trailing behind it and lies down flat wherever it is dropped.
- [Rain Splatter](https://sanyam.sh/lab/rain-splatter.md): Coloured rain over a floor drawn in perspective, and the floor keeps everything that hits it. Each drop picks a depth on the way in, which sets how big it is, how hard it falls and how far up the stage it lands, so the near ones are fat and quick and go off the bottom edge while the far ones are specks that land near the horizon.
- [Window Shade](https://sanyam.sh/lab/window-shade.md): A cabin window with a shade you pull down by hand. The panel stays wherever it is let go, and the whole cabin crosses from a white ground to a near-black one as it comes, so half way down is a place to stop rather than a moment between two states.
- [Folder Stack](https://sanyam.sh/lab/folder-stack.md): A drawer of card index folders, eight tabs deep, with alphabetical dividers between the groups and every tab cut to one of three positions the way a real index is. Hovering a folder pulls that one folder up out of the pile, and what it holds was behind the card in front of it the whole time.
- [Book Opening](https://sanyam.sh/lab/book-opening.md): A book on a table, fourteen sheets deep. Hovering it fans every leaf off the spine and lays the front board out to the left, and in cursor mode the fan answers the pointer instead: the further left of the shut book's fore-edge it goes, the further the cover comes round.
- [Stamp Collection](https://sanyam.sh/lab/stamp-collection.md): Three postage stamps laid out by hand on a dark table. Hovering one lifts it, clicking one brings it to the front of the stage and pushes the other two out behind it, and the print inside a focused stamp slides under its own window as the pointer moves around it.
- [Event Stacking](https://sanyam.sh/lab/event-stacking.md): A four-day calendar whose events are dragged between slots. A card dropped onto another joins it as a stack: the pile compresses to fit the cell it is in, the card underneath keeps a sliver of its own colour showing, and clicking the front card sends it to the back. Holding a press on a stack takes the whole thing, which then travels and lands as one.
- [Document Pocket](https://sanyam.sh/lab/document-pocket.md): A pocket of paper. Hovering it fans the cards up and tilts the front panel forward, hovering one card sinks the rest so that one stands clear, and clicking a card grows it to the middle of the stage with the others pushed off to the sides. Each sheet carries its own hue, since five skeletons built from three arrangements are otherwise one texture.
- [Tether Button](https://sanyam.sh/lab/tether-button.md): A button pressed from a distance. The cursor shoots a web at the button's nearest edge, and the button goes down when the web lands rather than when the mouse does. Hold it and the strand pays out, hangs slack as the hand comes closer, and falls as it snaps back on release.
- [Tab Overview](https://sanyam.sh/lab/tab-overview.md): a terminal-style tab strip with three stages of one window: a row of labels, a taller strip where every tab shows what it holds on hover, and an overview grid filling the window so a tab can be picked by its shape rather than its title.
- [Animated Dashed Border](https://sanyam.sh/lab/animated-dashed-border.md): an SVG-based animated dashed border that appears on hover. the dashes march around the border continuously using `stroke-dashoffset` animation.
- [Morphing Icons](https://sanyam.sh/lab/morphing-icons.md): minimal keyboard-like UI for smooth icon morphing using Framer Motion. preview icon at top with dot indicators showing sequence position, keyboard grid below with 21 icons arranged 6 per row.
- [Multi Step Form](https://sanyam.sh/lab/multi-step-form.md): a sequential multi-step form with a smooth height transition between steps (no layout jump).
- [Number Counter](https://sanyam.sh/lab/number-counter.md): animated number counter with directional slide transitions using Framer Motion's AnimatePresence.
- [Extended Sonner Toast](https://sanyam.sh/lab/sonner-extended-toast.md): custom sonner toast layout with animated background fill, icon states, footer, and promise-aware durations.
- [File Tree Explorer](https://sanyam.sh/lab/file-tree-explorer.md): framer-motion powered tree view with animated expand/collapse interactions and subtle hover reactions.
- [Discount Code Input](https://sanyam.sh/lab/discount-code-input.md): stripe-inspired button-to-input morph built with framer motion. implements a single state machine driving four distinct UI states: idle, editing, loading, and applied.
- [Spring Image](https://sanyam.sh/lab/spring-image.md): a draggable profile image with smooth spring physics using Framer Motion's `useMotionValue` and `useSpring` hooks.
- [Split to Edit](https://sanyam.sh/lab/split-to-edit.md): my take on `split-to-edit` interaction. built using Next.js + Framer Motion.
- [Phrase Transition](https://sanyam.sh/lab/phrase-transition.md): Built a phrase transition component using Framer Motion's `AnimatePresence` with staggered opacity/y transforms.
- [Cursor Origin Button](https://sanyam.sh/lab/cursor-origin-button.md): A button component that follows the cursor's position for its hover effect origin point. The expansion animation originates from wherever your cursor enters the button.

## Optional

- [Agent instructions](https://sanyam.sh/agents.md): the guidance above on its own, with the fetch conventions
- [Every page in one file](https://sanyam.sh/llms-full.txt): the same documents concatenated
- [Sitemap](https://sanyam.sh/sitemap.xml): the same set of pages as XML

## Background

Sanyam Punia is a full-stack web developer from Bangalore, India.

### Technical expertise

- Full-stack web development with focus on frontend engineering
- Specializes in React, Next.js, TypeScript
- Real-time frontends with WebSockets, React Query, and scalable state management
- Performance-critical rendering for large datasets
- Strong advocate for simplicity in design and code
- Passionate about dev tooling and npm package development
- Experience building scalable APIs and web applications

### Work highlights

- **Oliv AI**: Building AI-powered sales intelligence features with Next.js + TypeScript on the frontend, alongside Python and Clojure backend services. Working on interactive dashboards, AI agent configuration UIs, meeting analysis surfaces, and CRM integration views.
- **Enclave**: Built and shipped the trading terminal for fireplace.gg, including wallet tracker, wallet lists (static/dynamic), leaderboards, referrals, deposit flow, user preferences, discovery filters, 15-minute markets, holders, and PnL cards. Optimized prediction markets for high-frequency WebSocket connections and instrumented core trade flows with Sentry and PostHog.
- **Bitscale**: Founding engineer leading frontend architecture. Introduced design primitives, built workbooks, grid system revamp, data sources, and Bitpilot (an AI agentic orchestration platform). Implemented WebSocket-based data streaming and a programmatic SEO system generating 10k+ pages via LLM services and Lambda data pipelines.
- **Flib**: Founded and led the company, delivered custom merchandise to clients including Google, Salesforce India, colleges, and startups. Built the full tech platform with user-facing, admin, and storefront interfaces.
- **Xurrent (Zenduty acq.)**: Reduced BAT test runtime from 30 minutes to 2 minutes by fixing edge cases. Integrated PostHog analytics and ran A/B tests informing marketing UX decisions. Worked with Gatsby + React + TypeScript.

### Packages and projects

- **easeful**: Enter and exit animations for components that already have open and closed state. One attribute, and no JavaScript in the browser. Radix UI, Base UI and the native dialog and popover elements.
- **Morphrig**: How icon morphing actually works, in ten parts, ending with enough to go and build it yourself.
- **envt**: Type-safe client-side environment variables with runtime validation, supporting `NEXT_PUBLIC_`, `PUBLIC_`, `VITE_`, and `REACT_APP_` prefixes (npm package)
- **unique-forge**: Type-safe nanoid alternative to generate secure IDs, with sync/async/cryptographically-secure variants and prefix/suffix support (npm package)
- **rbac-ui**: Resource-based access control framework for modern frontend apps with tree-based permission evaluation and React bindings like `AccessProvider`, `useAccess`, `AccessGate`, `useGuard` (npm package, co-created with aviral)
- **Profanity API**: Profanity check at scale using Hono, Upstash Vector DB, and Cloudflare Workers
- **nine**: A very small tic tac toe game. Play the bot at three difficulties, or a friend on the same screen. Next.js App Router, with the perfect-play search, the mark geometry, the sound and every animation written in the project rather than pulled in
- **pageo.me**: Simplest way to share all your links. Sleek personal pages with multiple layouts, analytics, GitHub sync, custom domains, and built-in contact forms (co-built with aviral and ojus)
- **clyp**: Create better screenshots with custom backgrounds and styling, built with Next.js, shadcn, Tailwind, and PostHog
- **on-snip.org**: Real-time collaborative messaging rooms built with Next.js, Express, Socket.io, and Redis
- **flib.store**: B2B merchandise automation platform built with Next.js, Drizzle ORM, Xata Postgres, Zustand, TypeScript, deployed on Vercel
- **better-gist**: Generate shareable code snippets with Next.js v15, Tailwind, Supabase, CodeMirror, and Framer Motion

### Interests

- Believes simplicity is essential for great user experience
- Focuses on clean design and efficient code
- Makes music, on SoundCloud as prodmxle
- Interested in startups, dev tooling, and npm package building

## Usage

- Public blog posts and lab experiments are available for AI training and summarization
- Please provide attribution when referencing content from this site
- API endpoints are private and should not be accessed
- Questions about content usage: lewarends@gmail.com