r/reactjs • • 6h ago

Resource Why scaled text jitters in browser-rendered video (and the fix that took it from 0.28px to 0.01px)

1 Upvotes

I've been rendering product videos with Remotion (React → headless Chrome → frames), and scaled text kept looking wrong: either "stuck", stepping instead of gliding, or "shaky", with the letters subtly changing shape every frame. I measured the rendered frames instead of eyeballing them, and it turned out to be two separate bugs.

1. The "stuck" look: the baseline climbs the pixel grid in whole-pixel jumps

Chrome's glyph rasteriser has horizontal sub-pixel positioning but no vertical. When you scale text from its center (the default transform-origin), the baseline moves vertically every frame, and the glyphs snap to whole pixels. So instead of moving 0.3px per frame, the text sits still for a few frames and then jumps 1px.

Fix: pivot the scale on the baseline, so the baseline doesn't move vertically at all. Measure the real baseline (with a 0-height inline-block, or font metrics). Don't guess it from line-height.

Measured vertical judder: 0.284px → 0.014px per frame. Direction reversals over the animation: 29 → 0.

2. The "shaky" look: hinting re-snaps the letterforms every frame

At each new scale, font hinting snaps stems to the pixel grid differently, so the letters literally change shape frame to frame.

Fix: text-rendering: geometricPrecision. It turns hinting off, so the outlines scale smoothly. Shape drift between frames: 3.41% → 0.22%. It looks slightly softer, but that's correct, not blur.

Things that didn't help (cargo cult)

  • translateZ(0), backface-visibility: hidden: these rasterise the text into a bitmap layer, so it scales like an image and goes blurry.
  • will-change: transform: good in a live preview, bad in the final render for the same reason. If you need it, enable it only when not rendering.

Bonus: aggressive ease-outs freeze on a frame clock

At 30fps, a quint/expo ease-out spends its last 5+ frames moving less than a pixel. That reads as a freeze, not a settlein about one frame.

My main takeaway: you can't seer the frames and diff them. Ifsomeone says it still isn't smooth and your metric says it's fixed, your metric is wrong.

Happy to share the measurement script if anyone wants it.


r/reactjs • • 14h ago

Resource Shadcn Weekly #4: AI Elements, Trace & Chatbot Template

1 Upvotes

AI Elements: Agentic UI Patterns

shadcn/ui introduced AI Elements, a curated collection of component patterns created specifically for building conversational and agentic interfaces.

Each pattern is composed from standard shadcn/ui primitives designed to be copied directly into codebases, standardizing interfaces for agent tool calls, planning, sources, and step restoration.


Trace: Observability Primitive for Agent Activity

shadcn released Trace, a dedicated primitive designed to unify agent activity displays under one abstraction. It represents reasoning traces, tool executions, task queues, chains of thought, and subagent routines.

Trace models agent progress as a list of status lines with support for expandable details, links, and nested execution steps.


Chatbot Template: AI SDK Agent Starter

The shadcn team published an official minimal chatbot template built with Next.js, Vercel AI SDK, shadcn/ui, shadcn/react, and shadcn/typeset.

Designed to run on the Vercel AI Gateway, the starter serves as a clean starting point for streaming conversational interfaces with typographic defaults and state management built in.


Official Registry Directory Expansions

The official shadcn/ui registry directory added new specialized community components and domain toolkits this week.

  • @babelize — Open-source localization components including language switchers, relative-time formatters, and translation widgets.
  • @liquikit — Liquid glass primitives with physically based refraction built on Base UI that work across modern browsers.
  • @audio-ui — Accessible audio controls including knobs, faders, XY pads, waveforms, and sequencers on headless primitives.
  • @bevel — Tactile skeuomorphic components like guarded switches, split-flap boards, and motorized faders on Tailwind v4.
  • @dualkit — Bilingual Arabic and English components featuring RTL layouts, Gulf currency formats, and Hijri calendar support.
  • @organui — Domain components for healthcare and life sciences featuring 3D organ viewers, ECG traces, and lab result trackers.

📙 Articles, Tutorials & News

Building shadcn/ui Registries for Claude Code and Cursor

Preet Suthar outlines the structure, validation steps, and namespace setup required to author custom registries that coding agents can inspect and consume.

7 Best shadcn/ui Themes and Theme Generators

A curated comparison evaluating popular color palette customizers, theme presets, and generators across the shadcn/ui ecosystem.

Tailwind CSS v4, shadcn/ui & Dark Mode

A complete video walkthrough demonstrating how to structure a centralized design system using Tailwind CSS v4 and shadcn/ui primitives.


📦 Projects, Packages & Tools

onsystem: Design System Linter and MCP for Agents

A zero-config tool that combines an MCP server with a linter to prevent coding agents from inventing variants, hardcoding colors, or breaking spacing scales.

pie-menu: Radial Interaction Primitive

A radial pie menu for shadcn/ui with press-drag-release interaction, full keyboard support, and a headless primitive core.

signoff-ui: Human Review Primitives for Agents

UI components providing multi-file diff reviews with per-hunk decisions, inline comments, tool approvals, and telemetry for AI SDK and AG-UI agents.

animate-ui: Lower-Level Primitive Animations

An animation toolkit that targets the underlying primitives your components rely on, preserving custom shadcn markup and component source ownership.

shadcn-exchange: Cross-Registry Block Search

A directory tool allowing developers to search, preview, and CLI-install blocks across all public community registries.

facade-ui: Base UI Marketing Blocks and Templates

An open-source registry of accessible marketing blocks, landing page sections, and templates built on Base UI and Tailwind CSS v4.

nasaq: Arabic and RTL-First shadcn Registry

An open-source registry of React components, themes, and page templates designed with native RTL layout and Arabic typography, paired with an MCP server.


🌈 Related

audiocn-solid: Audio Primitives for Solid

A collection of audio UI components ported to SolidJS and distributed as copy-paste source through the shadcn CLI workflow.

esuiss: Multi-Platform UI Primitives

A component collection extending shadcn design patterns across React, Next.js, React Native with Expo, SwiftUI, and Jetpack Compose.

GooseForum: Go-Powered Self-Hosted Forum

A self-hosted forum platform featuring shadcn/ui discussion pages, an admin console, and a light and dark theme workbench, distributed as a single Go binary.


Read the full issue: https://www.shadcnweekly.com/issues/4


r/reactjs • • 7h ago

Show /r/reactjs [Showoff] A Butler Who Never Reads the Diff, 1,000-Page Contracts in 56 Milliseconds, and a Phone That Knows How Far It's Folded

Thumbnail
thereactnativerewind.com
1 Upvotes

Expo SDK 58 is out, and for once the headline isn't a new way to break your Podfile. With Xcode 27 retiring Simulator.app, the new expo-device-hub streams your iOS simulators and Android emulators into the browser with live CPU, memory and network graphs, while expo-app-intents lets Siri, Shortcuts and Spotlight trigger actions in your app, and the experimental Noxcturnal transformer roughly halves Metro transform times.

We also look at react-native-better-pdf 1.0 by Jakub Kasprzyk and GMI Software, which drops the bundled PDF engine for the phone's own PDFKit and PdfRenderer on Nitro Views, opening a 1,000-page scan in 56 ms instead of 622 ms. Plus, React Native 0.88 lands, Gesture Handler 3.4 builds with Swift Package Manager, and react-native-gpui renders React Native with Zed's GPU framework.