---
title: "Blogs"
url: "https://sanyam.sh/blog"
---

# Blogs

- [13 interface details you can measure](https://sanyam.sh/blog/details-you-can-measure), 2026-10-30, 7 min read
  Thirteen interface details and the number that decided each, from press feedback and springs to hit testing and contrast.
- [unslopping a site with dither, grain, ascii and line screens](https://sanyam.sh/blog/unslopping-a-site-with-dither-grain-ascii-and-line-screens), 2026-10-25, 2 min read
  AI-built sites default to smooth gradients. Dither, grain, ASCII and line screens draw tone with marks you can see. Live demos and prompts to copy.
- [your site is probably broken with reduced motion on](https://sanyam.sh/blog/your-site-is-probably-broken-for-reduced-motion), 2026-10-23, 1 min read
  Turn on reduce motion and reload your site. Framer Motion fade-ins that start hidden never show, and dialogs waiting on transitionend never close.
- [skip the icon library](https://sanyam.sh/blog/skip-the-icon-library), 2026-10-12, 1 min read
  This site imported 54 icons from Phosphor. I drew my own set instead, and the package is gone. For a small site, that is the better trade.
- [selecting past a line adds a space](https://sanyam.sh/blog/selecting-past-a-line-adds-a-space), 2026-10-09, 1 min read
  Drag a selection from a big number into the line below and Chrome paints an extra box after the number. It is the line break, drawn one space wide.
- [the cursor forgets you are dragging](https://sanyam.sh/blog/the-cursor-forgets-you-are-dragging), 2026-10-03, 1 min read
  A chip you can click and drag shows the wrong cursor mid-drag. CSS reads the element under the pointer, not the gesture, so put the drag in state.
- [why nested rounded corners show an extra curve](https://sanyam.sh/blog/why-nested-rounded-corners-show-an-extra-curve), 2026-09-26, 1 min read
  A rounded card with a thick rim got a tiny extra curve in every corner. Two rounded boxes drew two curves. The fix gives the curve to one element.
- [the card that tilts out from under you](https://sanyam.sh/blog/the-card-flinches-when-you-reach-its-edge), 2026-09-20, 4 min read
  A tilting card buzzes at its edges. Hovering it moves the card out from under the pointer, so the hover drops and it comes back. Put the hit box outside the tilt.
- [safe triangles, and the submenu you cannot reach](https://sanyam.sh/blog/the-submenu-closes-before-you-get-there), 2026-08-31, 4 min read
  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/blog/csr-vs-ssr-vs-ssg-vs-isr-vs-ppr), 2026-08-29, 2 min read
  What each one does, when it runs, and one real example each.
- [turning a signature into two pen strokes](https://sanyam.sh/blog/turning-a-signature-into-two-pen-strokes), 2026-08-25, 5 min read
  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/blog/the-redirect-that-broke-my-link-preview), 2026-08-04, 4 min read
  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/blog/state-based-dropdown-trigger-styling), 2025-12-11, 3 min read
  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/blog/modeling-link-navigation-state-with-usetransition-and-useoptimistic), 2025-11-01, 7 min read
  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/blog/recreating-stream-text-animation-hook), 2024-12-15, 5 min read
  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/blog/understanding-trpc-using-nextjs), 2023-03-19, 7 min read
  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.