Fluid Scale

Fluid Scale is a lightweight layout utility that lets you fluidly scale individual components, cards, and dense UI blocks across breakpoints. Designed for elements that are hard to adapt manually, it seamlessly shrinks or grows content while preserving clean layout reflow.

👉 Try the live interactive demo here

Key Features:

• Fluid Layout Reflow: Uses CSS zoom technology for genuine container reflow, ensuring the wrapper perfectly hugs the true scaled height of your content without leaving awkward empty gaps.

• Purpose-Built for Hard-to-Scale Assets: Solves the pain of rigid code components, embedded widgets, and complex cards with dense typography hierarchies—eliminating tedious manual font and spacing edits across screen sizes.

• Universal Component Slot: Works with standard frames, stacks, native elements, and custom code components. Slot any layout directly inside to scale fonts, padding, and gaps simultaneously while preserving container behavior.

• Precise Scale Control: Key in exact scale factors across any breakpoint in 0.01 increments (0.1x to 2.0x) for pixel-perfect layout adjustments.

• Custom Scale Origins: Anchor your content to 4 key origin points (Top Left, Top Center, Top Right, Center) so cards and blocks stay aligned to your grid as they shrink.

• Seamless Breakpoint Workflow: Simply adjust your scale value per breakpoint override—scaling your entire complex layout down in one action instead of tweaking dozens of internal font sizes, gaps, and layout properties one by one.