furin-ui 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Marcelo Treviño Velázquez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,231 @@
-# Temporary Holding Version
+# furin
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Animated components for React. Text that decrypts itself, rolling numbers, living backgrounds, cards with 3D tilt, buttons, cursors and loaders. Zero dependencies (just React), TypeScript included, production ready.
+
+<!-- gen:resumen -->
+**92 free components** in 10 categories: Text (19), Backgrounds (21), Cards (12), Buttons (9), Cursors (7), Navigation (11), Data (1), Galleries (4), Loaders (3), Interaction (5).
+<!-- /gen:resumen -->
+
+- Zero dependencies besides React.
+- TypeScript types included (`.d.ts`).
+- SSR-safe: they work in Next.js (App Router), Vite, Remix, Astro and any React project.
+- They respect `prefers-reduced-motion` and clean everything up on unmount.
+- MIT license: use them anywhere.
+
+Catalog with live previews: **https://furin.dev/components/** · Documentación en español: **https://furin.dev/es/**
+
+## Install
+
+```bash
+npm i furin-ui
+```
+
+Also works with `pnpm add furin-ui`, `yarn add furin-ui` or `bun add furin-ui`.
+
+## Usage
+
+```tsx
+import { Descifrar, Odometro, Aurora } from "furin-ui";
+
+export default function Hero() {
+  return (
+    <Aurora style={{ minHeight: 360 }}>
+      <h1 style={{ fontSize: 48, color: "white" }}>
+        <Descifrar text="Hello, furin" />
+      </h1>
+      <Odometro value={1250} prefix="$" suffix=" USD" style={{ fontSize: 32, color: "white" }} />
+    </Aurora>
+  );
+}
+```
+
+Each component ships its own CSS and imports it for you; you don't need to add any stylesheet.
+
+If you'd rather load only what you use, import per component:
+
+```tsx
+import Descifrar from "furin-ui/descifrar";
+import { Aurora } from "furin-ui/aurora";
+```
+
+If you'd rather import all the CSS once (in your layout, for example), use:
+
+```tsx
+import "furin-ui/estilos.css";
+```
+
+## Requirements
+
+- React 18 or newer (and `react-dom`).
+- Any bundler that can import `.css` files from `node_modules`: Next.js, Vite, Remix, Astro, webpack, Parcel, esbuild or Bun.
+- ESM-only package. In the Next.js App Router the components already carry the `"use client"` directive.
+
+## Free components
+
+Each link goes to the live preview, the live controls and the props table.
+
+<!-- gen:componentes -->
+### Text (19)
+
+| Component | What it does |
+|---|---|
+| [ASCII Text](https://furin.dev/components/ascii-text/) · `AsciiText` | Text drawn with ASCII characters. A lens around the cursor magnifies, rotates and scrambles them. |
+| [Blur Number](https://furin.dev/components/blur-number/) · `BlurNumber` | A number whose digits roll to the new value with vertical motion blur, one after another. |
+| [Chrome Text](https://furin.dev/components/chrome-text/) · `ChromeText` | Liquid chrome letters whose reflection follows the cursor. |
+| [Decipher Text](https://furin.dev/components/descifrar/) · `Descifrar` | Text that appears by deciphering itself: random characters settle into place letter by letter. |
+| [Gold Foil Text](https://furin.dev/components/gold-foil-text/) · `GoldFoilText` | Gold foil text with relief and a specular glint as you move the cursor. |
+| [Gust](https://furin.dev/components/rafaga/) · `Rafaga` | A headline whose letters get swept away by the cursor's wind like leaves, then spring back into place. |
+| [Magnetic Letters](https://furin.dev/components/magnetic-letters/) · `MagneticLetters` | Every letter is pulled toward the cursor by a bouncy spring, tinting and growing as it gets close. |
+| [Mask Reveal](https://furin.dev/components/mask-reveal/) · `MaskReveal` | Staggered lines that slide up from behind a mask, like a product launch intro. |
+| [Morph Text](https://furin.dev/components/morph-text/) · `MorphText` | Words melt into one another with a viscous blur-and-threshold transition and a liquid sheen. |
+| [Odometer](https://furin.dev/components/odometro/) · `Odometro` | Numbers that roll digit by digit up to their value, like a mechanical odometer. |
+| [Orbit Text](https://furin.dev/components/orbit-text/) · `OrbitText` | Text on a circle that turns slowly and speeds up, with inertia, when the cursor gets close. |
+| [Outline Fill](https://furin.dev/components/outline-fill/) · `OutlineFill` | Outlined text that fills with liquid through a wave that starts where the cursor enters, and drains when it leaves. |
+| [Pixel Assemble](https://furin.dev/components/pixel-assemble/) · `PixelAssemble` | Text assembles itself from a cloud of spring-driven particles; the cursor scatters them and they snap back on their own. |
+| [RGB Glitch Text](https://furin.dev/components/rgb-glitch-text/) · `RGBGlitchText` | Clean text that occasionally breaks into short bursts: split RGB channels and shifted slices. |
+| [Shimmer Sweep](https://furin.dev/components/shimmer-sweep/) · `ShimmerSweep` | A satin sheen sweeps across the text like light over aluminum. |
+| [Split-Flap Board](https://furin.dev/components/tablero/) · `Tablero` | A board of flaps that flip in 3D, character by character, until the phrase forms, like at a train station. |
+| [Typewriter](https://furin.dev/components/typewriter/) · `Typewriter` | Types, deletes and retypes phrases with a human rhythm, pauses on punctuation and a blinking cursor. |
+| [Weight Wave](https://furin.dev/components/weight-wave/) · `WeightWave` | The weight of a variable font ripples with the cursor's proximity, letter by letter. |
+| [Word Roller](https://furin.dev/components/word-roller/) · `WordRoller` | A word rolls vertically between options on a spring-loaded drum, and its pill changes width along with it. |
+
+### Backgrounds (21)
+
+| Component | What it does |
+|---|---|
+| [Aurora](https://furin.dev/components/aurora/) · `Aurora` | A WebGL background of slowly rippling aurora curtains, in your own colors. |
+| [Code Rain](https://furin.dev/components/code-rain/) · `CodeRain` | Columns of real JSX and TypeScript snippets falling across three depth planes, with a glowing head and syntax highlighting. |
+| [Dither Wave](https://furin.dev/components/dither-wave/) · `DitherWave` | A relief of waves drawn with one-bit Bayer ordered dithering. The cursor leaves expanding rings. |
+| [Fireflies](https://furin.dev/components/fireflies/) · `Fireflies` | Fireflies that drift at three depths and blink with a warm glow; they curiously approach the cursor and circle it. |
+| [Galaxy](https://furin.dev/components/galaxy/) · `Galaxy` | A spiral galaxy of tens of thousands of particles with a glowing core that rotates slowly; the cursor tilts the view. |
+| [Glass Blobs](https://furin.dev/components/glass-blobs/) · `GlassBlobs` | Blobs of color floating behind a sheet of frosted glass. |
+| [Grain Mesh](https://furin.dev/components/grain-mesh/) · `GrainMesh` | A mesh gradient that floats and blends, with fine film grain; the cursor pulls on one of the blobs. |
+| [Halftone Field](https://furin.dev/components/halftone-field/) · `HalftoneField` | A print-style halftone with two overprinted inks: the dots grow and shrink with a flowing field and with the cursor. |
+| [Holo Foil](https://furin.dev/components/holo-foil/) · `HoloFoil` | A holographic background: an iridescent film, a fine diffraction grating and a sheen that shift with the cursor's angle. |
+| [Ink Bloom](https://furin.dev/components/ink-bloom/) · `InkBloom` | Drops of ink that bloom in dark water with swirls and tendrils, one after another in a cycle. Tap to drop one; move the cursor to stir the water. |
+| [Lava Lamp](https://furin.dev/components/lava-lamp/) · `LavaLamp` | A lava lamp with glass and warm light: the wax rises, stretches, merges with other blobs and splits apart. Your cursor warms it. |
+| [Liquid Chrome](https://furin.dev/components/liquid-chrome/) · `LiquidChrome` | A chrome surface that ripples and reflects a luminous environment. |
+| [Live Grid](https://furin.dev/components/rejilla-viva/) · `RejillaViva` | A grid of dots that part and light up around the cursor, on a spring. |
+| [Prism Light](https://furin.dev/components/prism-light/) · `PrismLight` | A real 3D scene in WebGL2: a glass prism (beveled mesh with fresnel and refraction) on a reflective vinyl floor. A light orb follows your cursor and fires a volumetric beam; the spectrum fans out by Snell's law, one ray per color, and lands on the wall and floor with its caustic. The camera parallaxes with the cursor. |
+| [Retro Grid](https://furin.dev/components/retro-grid/) · `RetroGrid` | A perspective grid that scrolls endlessly toward a horizon with a muted sun; the cursor shifts the horizon and holding down speeds it up. |
+| [Ripple Pond](https://furin.dev/components/estanque/) · `Estanque` | A WebGL water surface: the cursor and raindrops leave ripples that cross, catch the light and warp a grid beneath. |
+| [Silk Flow](https://furin.dev/components/silk-flow/) · `SilkFlow` | A silk fabric that ripples slowly, with an anisotropic thread sheen that shifts with the light and follows the cursor. |
+| [Smoke Field](https://furin.dev/components/smoke-field/) · `SmokeField` | Volumetric smoke with studio lighting that rises endlessly; your cursor parts and swirls it, and the smoke fills the gap back in. |
+| [Snowfall](https://furin.dev/components/snowfall/) · `Snowfall` | Snow in three layers of depth (far, mid and close bokeh) with a wind that blows toward wherever the cursor is. |
+| [Topo Lines](https://furin.dev/components/topo-lines/) · `TopoLines` | A living topographic map: contour lines of a slowly deforming terrain, with labeled index contours; the cursor raises a hill. |
+| [Warp Stars](https://furin.dev/components/warp-stars/) · `WarpStars` | Stars at warp speed with trails and depth; the cursor steers the vanishing point and holding down triggers the jump. |
+
+### Cards (12)
+
+| Component | What it does |
+|---|---|
+| [Bento Light](https://furin.dev/components/bento-light/) · `BentoLight` | A six-cell bento grid with a light that jumps between cells, following the cursor (or on its own), and spills onto its neighbors. |
+| [Border Beam](https://furin.dev/components/border-beam/) · `BorderBeam` | A beam of light with a tail, a bright head and a halo that travels around the outline of any content at constant speed. |
+| [Card Stack](https://furin.dev/components/card-stack/) · `CardStack` | A deck of cards you shuffle by dragging the top one: inertia, rotation and a spring back to the bottom. Also works with click and keyboard. |
+| [Electric Border](https://furin.dev/components/electric-border/) · `ElectricBorder` | Arcs of electricity that snake around the border, with local discharges, sparks and a flickering glow. |
+| [Folder Peek](https://furin.dev/components/folder-peek/) · `FolderPeek` | A cardboard folder that opens on hover and lets its documents peek out with a soft bounce. |
+| [Glass Card](https://furin.dev/components/glass-card/) · `GlassCard` | Liquid glass with refraction, a specular edge and a reflection that follows the cursor. |
+| [Parallax Card](https://furin.dev/components/parallax-card/) · `ParallaxCard` | Real 3D layers (sky, stars, planet, ring, dunes, text and shine) that separate at different depths as the card tilts. |
+| [Profile Foil](https://furin.dev/components/profile-foil/) · `ProfileFoil` | A profile card with a holographic foil: it tilts in 3D with the cursor and the iridescence shifts with the angle. |
+| [Shine Card](https://furin.dev/components/shine-card/) · `ShineCard` | A satin sheen sweeps across the card as the cursor passes over it. |
+| [Sticker Peel](https://furin.dev/components/sticker-peel/) · `StickerPeel` | A glossy die-cut sticker that peels from the corner following the cursor, with curvature, a paper back and a shadow. |
+| [Ticket Tear](https://furin.dev/components/ticket-tear/) · `TicketTear` | A paper ticket with a perforation: drag the stub and it tears from top to bottom, with a fibrous edge and a shadow that grows as it peels away. |
+| [Titanium Card](https://furin.dev/components/metal-card/) · `MetalCard` | A brushed-titanium card whose reflection shifts as it tilts. |
+
+### Buttons (9)
+
+| Component | What it does |
+|---|---|
+| [Confetti Button](https://furin.dev/components/confetti-button/) · `ConfettiButton` | A button that fires physical confetti: paper pieces that spin in 3D, fall with air drag and flutter. |
+| [Copy Morph](https://furin.dev/components/copy-morph/) · `CopyMorph` | A copy button where the icon outline morphs into a checkmark with a stroke and spring morph. It really copies the text with navigator.clipboard (with a fallback). |
+| [Download Button](https://furin.dev/components/download-button/) · `DownloadButton` | A button that narrows into a progress bar, advances at an uneven pace like a real network, and ends in a checkmark. With href, it really downloads the file. |
+| [Glass Button](https://furin.dev/components/glass-button/) · `GlassButton` | A liquid-glass button that refracts the background behind it. |
+| [Glint Button](https://furin.dev/components/glint-button/) · `GlintButton` | A dark button with a glint that sweeps across it every so often and on hover, lighting up the fill, the border and the text at once. |
+| [Hold to Confirm](https://furin.dev/components/hold-to-confirm/) · `HoldToConfirm` | Press and hold to confirm: a ring fills, the button shakes more and more, and it vibrates on completion. Works with mouse, touch or keyboard. |
+| [Metal Button](https://furin.dev/components/metal-button/) · `MetalButton` | A polished metal button with a beveled edge and a reflection that follows the cursor. |
+| [Ripple Button](https://furin.dev/components/ripple-button/) · `RippleButton` | A button whose ripple is born exactly where you click: a luminous wavefront with rings that sweeps out to the farthest corner. |
+| [Slide to Confirm](https://furin.dev/components/slide-to-confirm/) · `SlideToConfirm` | A physics-driven handle you drag to the end to confirm; release early and it springs back with a bounce. Accessible as a slider. |
+
+### Cursors (7)
+
+| Component | What it does |
+|---|---|
+| [Click Burst](https://furin.dev/components/click-burst/) · `ClickBurst` | Fine rays that burst out where you click: they travel outward, detach from their origin and leave a ring and tiny sparks. |
+| [Crosshair](https://furin.dev/components/crosshair/) · `Crosshair` | A precision crosshair: edge-to-edge lines with a center gap, rulers with tick marks along the edges and live monospace coordinates. |
+| [Goo Cursor](https://furin.dev/components/goo-cursor/) · `GooCursor` | A translucent jelly cursor with a specular highlight: it drags droplets behind it that stretch into a trail and melt back into it when you stop. |
+| [Ink Trail](https://furin.dev/components/ink-trail/) · `InkTrail` | A glossy ink trail that follows the cursor, widens as if bleeding into paper, and frays into strands until it fades away. |
+| [Lens Cursor](https://furin.dev/components/lens-cursor/) · `LensCursor` | A glass magnifier that enlarges whatever is underneath it. |
+| [Ring Cursor](https://furin.dev/components/ring-cursor/) · `RingCursor` | A ring that follows the cursor with an elastic lag, stretches with speed and, over anything clickable, morphs into its outline like a soft magnet. |
+| [Spark Trail](https://furin.dev/components/spark-trail/) · `SparkTrail` | The cursor sheds sparks with real physics: they inherit its momentum, fall under gravity, bounce on the floor and cool from white to ember. |
+
+### Navigation (11)
+
+| Component | What it does |
+|---|---|
+| [Dock](https://furin.dev/components/dock/) · `Dock` | A bar of icons that magnify under the cursor, on glass. |
+| [Elastic Slider](https://furin.dev/components/elastic-slider/) · `ElasticSlider` | A slider (role slider, full keyboard support) that stretches like rubber when dragged past its limits and snaps back with a bounce; the track squashes to preserve volume. |
+| [Glass Segmented Control](https://furin.dev/components/glass-segmented/) · `GlassSegmented` | A glass segmented control with a lens that slides between options. |
+| [Gooey Tabs](https://furin.dev/components/gooey-tabs/) · `GooeyTabs` | Accessible tabs whose selection is a blob of liquid: it stretches toward the new tab, thins at the neck and merges when it arrives. |
+| [Marquee](https://furin.dev/components/marquee/) · `Marquee` | A seamless infinite marquee: the cursor slows it down and nudges it with inertia, rows run in opposite directions, and keyboard focus pauses it. |
+| [Metal Knob](https://furin.dev/components/metal-knob/) · `MetalKnob` | A knurled metal knob you turn by dragging. |
+| [Pill Nav](https://furin.dev/components/pill-nav/) · `PillNav` | Accessible tabs (tablist, arrow keys, Home and End) with a pill that slides on a spring: the leading edge arrives first and stretches the pill as it crosses. |
+| [Spring Accordion](https://furin.dev/components/spring-accordion/) · `SpringAccordion` | An accessible accordion (aria-expanded, regions, arrow keys, Home and End) whose regions open on a real spring: the height bounces as it lands and the content comes in from blurry to sharp. |
+| [Spring Tooltip](https://furin.dev/components/spring-tooltip/) · `SpringTooltip` | A tooltip (role tooltip) that follows the cursor on a spring and hangs from it like a tag: it tilts with speed and stretches a little as it moves. It also appears on keyboard focus. |
+| [Stepper](https://furin.dev/components/stepper/) · `Stepper` | Steps with a progress line that fills from one node to the next; the new step lights up as the stroke arrives and the checkmark draws itself on completion. |
+| [Toast Stack](https://furin.dev/components/toast-stack/) · `ToastStack` | Notifications stacked like cards: they fan out on hover or focus, pause while you read them, close on their own and are announced with aria-live. |
+
+### Data (1)
+
+| Component | What it does |
+|---|---|
+| [Analog Gauge](https://furin.dev/components/analog-gauge/) · `AnalogGauge` | An analog gauge whose needle swings and settles on its value, with a printed dial and a red zone. |
+
+### Galleries (4)
+
+| Component | What it does |
+|---|---|
+| [Coverflow](https://furin.dev/components/coverflow/) · `Coverflow` | Album covers in perspective with reflections: the center one faces you and the rest fan out. Arrows, drag with inertia, click and keyboard. |
+| [Masonry Reveal](https://furin.dev/components/masonry-reveal/) · `MasonryReveal` | A column masonry grid that appears piece by piece as it scrolls into view, with a soft bounce and a flash; hovering a piece zooms it in and shows its title. |
+| [Orbit Gallery](https://furin.dev/components/orbit-gallery/) · `OrbitGallery` | Cards with generated scenes on a 3D circular carousel: it spins on its own, drags with inertia, and a click brings a card to the front. |
+| [Photo Stack](https://furin.dev/components/photo-stack/) · `PhotoStack` | A stack of printed photos that fans out when you hover; a click sends the top one to the back. |
+
+### Loaders (3)
+
+| Component | What it does |
+|---|---|
+| [Liquid Fill](https://furin.dev/components/liquid-fill/) · `LiquidFill` | A glass flask that fills with liquid. |
+| [Morph Loader](https://furin.dev/components/morph-loader/) · `MorphLoader` | A glossy gradient shape that smoothly morphs between circle, square and triangle, spinning and squashing slightly on each change. |
+| [Typing Indicator](https://furin.dev/components/typing-indicator/) · `TypingIndicator` | A "typing…" bubble with three elastically bouncing dots that, in a loop, turns into the reply with a little spring. |
+
+### Interaction (5)
+
+| Component | What it does |
+|---|---|
+| [Holo Card](https://furin.dev/components/holograma/) · `Holograma` | A card with 3D tilt and an iridescent holographic foil that follows the cursor. |
+| [Magnet](https://furin.dev/components/iman/) · `Iman` | Wrap any element and it gets pulled toward the cursor with spring physics. |
+| [Red Thread](https://furin.dev/components/hilo-rojo/) · `HiloRojo` | The red thread of fate: a thread with Verlet physics that follows the cursor, pulls taut against its anchor and swings. |
+| [Spotlight Cards](https://furin.dev/components/reflector/) · `Reflector` | A grid of cards whose borders light up wherever the cursor passes, driven by a single shared light. |
+| [Wind Chime](https://furin.dev/components/campana/) · `Campana` | A glass furin wind chime that sways with the cursor's breeze and rings when touched. It doubles as a notification bell with a counter. |
+<!-- /gen:componentes -->
+
+## Alternative: shadcn
+
+If you'd rather have the code inside your project so you can edit it, every free component also installs with the shadcn CLI:
+
+```bash
+npx shadcn@latest add https://furin.dev/r/descifrar.json
+```
+
+It copies the `.tsx` and its `.css` to `components/furin/descifrar/`.
+
+## Furin Pro
+
+<!-- gen:pro -->
+The other 136 components in the catalog are original Furin designs and are sold separately: **Furin Pro** ($150 USD, one-time payment) includes the ones that exist on the day you buy, and **Lifetime** ($199 USD) adds every new component. Both come with a commercial license, unlimited projects and a Claude Code kit. See them running (the preview and live controls are free): **https://furin.dev/components/?plan=pro**. Pricing: **https://furin.dev/pricing/**
+
+Pro components aren't in this package; they're delivered with your license.
+<!-- /gen:pro -->
+
+## License
+
+MIT © 2026 Marcelo Treviño Velázquez

package/dist/analog-gauge/AnalogGauge.css

@@ -0,0 +1,119 @@
+@property --fag-x { syntax: "<number>"; inherits: true; initial-value: 0.5; }
+@property --fag-y { syntax: "<number>"; inherits: true; initial-value: 0.5; }
+
+.furin-analog-gauge {
+  --fag-size: 320px;
+  --fag-accent: #ff6a2a;
+  position: relative;
+  width: var(--fag-size);
+  height: var(--fag-size);
+  border-radius: 50%;
+  isolation: isolate;
+  transition: --fag-x 0.5s cubic-bezier(0.2, 0.75, 0.25, 1), --fag-y 0.5s cubic-bezier(0.2, 0.75, 0.25, 1);
+}
+
+/* Bisel cromado: reflejos de estudio en un cono y cepillado radial muy fino. */
+.furin-analog-gauge__bezel {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(from 205deg, #70767f 0%, #f5f7f9 7%, #454b53 16%, #bcc2ca 26%, #fcfdfd 35%, #5a6068 46%, #9ca3ad 57%, #f6f8fa 67%, #4a5058 79%, #adb3bc 90%, #70767f 100%);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.75),
+    0 6px 10px rgba(0, 0, 0, 0.55),
+    0 26px 36px -8px rgba(0, 0, 0, 0.85),
+    0 40px 60px -26px rgba(190, 205, 225, 0.22);
+}
+.furin-analog-gauge__bezel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg 0.45deg, rgba(0, 0, 0, 0.08) 0.45deg 0.9deg);
+  mix-blend-mode: overlay;
+}
+/* Chaflán interior: el mismo cromo con la luz invertida. */
+.furin-analog-gauge__chamfer {
+  position: absolute;
+  inset: 3.6%;
+  border-radius: 50%;
+  background: conic-gradient(from 25deg, #2c3037 0%, #a9b0b9 9%, #20242a 20%, #7b828c 31%, #d9dee4 40%, #2a2e34 52%, #8d949e 63%, #cdd2d9 73%, #23272d 85%, #8a919b 94%, #2c3037 100%);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.18);
+}
+.furin-analog-gauge__dial {
+  position: absolute;
+  inset: 7.2%;
+  border-radius: 50%;
+  background:
+    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.018) 0deg 1deg, rgba(0, 0, 0, 0) 1deg 2deg),
+    radial-gradient(circle at 50% 34%, #2a2e36 0%, #14161a 58%, #08090b 100%);
+  box-shadow:
+    inset 0 7px 16px rgba(0, 0, 0, 0.9),
+    inset 0 -2px 8px rgba(255, 255, 255, 0.04),
+    0 0 0 1px rgba(0, 0, 0, 0.8);
+}
+
+.furin-analog-gauge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+.furin-analog-gauge__tick { stroke: #c9ced6; stroke-width: 1.7; stroke-linecap: butt; }
+.furin-analog-gauge__tick.is-major { stroke: #f1f3f6; stroke-width: 3.4; }
+.furin-analog-gauge__tick.is-red { stroke: #ee4b50; }
+.furin-analog-gauge__zone { fill: none; stroke: #d93a3f; stroke-width: 6; opacity: 0.92; filter: drop-shadow(0 0 5px rgba(238, 75, 80, 0.55)); }
+.furin-analog-gauge__num { font: 600 18px / 1 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; fill: #eef0f3; font-variant-numeric: tabular-nums; }
+.furin-analog-gauge__num.is-red { fill: #ff7a7e; }
+.furin-analog-gauge__label { font: 600 12px / 1 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.28em; text-transform: uppercase; fill: #8b929c; }
+.furin-analog-gauge__unit { font: 700 20px / 1 "Geist", system-ui, sans-serif; letter-spacing: 0.06em; fill: #eef0f3; }
+.furin-analog-gauge__tipL { fill: var(--fag-accent); }
+.furin-analog-gauge__tipR { fill: color-mix(in srgb, var(--fag-accent) 52%, #000); }
+
+/* Eje: casquillo de acero con la aguja pasando por debajo. */
+.furin-analog-gauge__hub {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 11.5%;
+  height: 11.5%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0 28%, rgba(0, 0, 0, 0.35) 30%, rgba(255, 255, 255, 0.35) 33%, rgba(255, 255, 255, 0) 38%),
+    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 42%),
+    conic-gradient(from 40deg, #f1f4f7, #7d848e, #fafbfc, #5b626b, #eef1f4, #8a919b, #f1f4f7);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 5px 7px rgba(0, 0, 0, 0.6), inset 0 -3px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Cristal: reflejo curvo arriba, filo de luz abajo y una veta que se desplaza con el cursor. */
+.furin-analog-gauge__glass {
+  position: absolute;
+  inset: 7.2%;
+  border-radius: 50%;
+  overflow: hidden;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.07) 96%, rgba(255, 255, 255, 0.2) 100%),
+    radial-gradient(circle at 78% 104%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+.furin-analog-gauge__glare {
+  position: absolute;
+  left: 9%;
+  right: 9%;
+  top: 3%;
+  height: 46%;
+  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.015) 100%);
+  transform: translate(calc((var(--fag-x) - 0.5) * -16px), calc((var(--fag-y) - 0.5) * -10px));
+}
+.furin-analog-gauge__streak {
+  position: absolute;
+  top: -10%;
+  bottom: -10%;
+  width: 14%;
+  left: calc(8% + var(--fag-x) * 74%);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+  transform: skewX(-18deg);
+  filter: blur(2px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .furin-analog-gauge { transition: none; }
+}

package/dist/analog-gauge/AnalogGauge.d.ts

@@ -0,0 +1,34 @@
+import type { CSSProperties } from "react";
+export interface AnalogGaugeProps {
+    /** Valor que marca la aguja. */
+    value?: number;
+    /** Valor al inicio de la escala. */
+    min?: number;
+    /** Valor al final de la escala. */
+    max?: number;
+    /** Rótulo impreso en la carátula. */
+    label?: string;
+    /** Unidad impresa en la carátula. */
+    unit?: string;
+    /** Marcas grandes con número. */
+    ticks?: number;
+    /** Valor donde empieza la zona roja (usa el máximo para quitarla). */
+    redline?: number;
+    /** Diámetro del medidor, en px. */
+    size?: number;
+    /** Cuánto se pasa y oscila la aguja antes de asentarse (0 a 1). */
+    bounce?: number;
+    /** Color pintado en la punta de la aguja. */
+    accent?: string;
+    /** Cambia el valor solo cada pocos segundos (útil en demos). */
+    wander?: boolean;
+    /** Segundos entre cambios cuando wander está activo. */
+    interval?: number;
+    /** Clase extra para el contenedor. */
+    className?: string;
+    /** Estilos extra para el contenedor. */
+    style?: CSSProperties;
+}
+/** Medidor analógico: bisel cromado, carátula con marcas y números, aguja de acero con física de resorte (se pasa y se asienta) y cristal con reflejo. */
+export declare function AnalogGauge({ value, min, max, label, unit, ticks, redline, size, bounce, accent, wander, interval, className, style, }: AnalogGaugeProps): import("react").JSX.Element;
+export default AnalogGauge;

package/dist/analog-gauge/AnalogGauge.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import "./AnalogGauge.css";
+const BARRIDO = 240; // grados que recorre la aguja
+const C = 200; // centro del lienzo SVG (viewBox 400)
+const SUBDIV = 5;
+const limitar = (v, a, b) => Math.min(b, Math.max(a, v));
+const rad = (g) => (g * Math.PI) / 180;
+const polar = (r, grados) => ({ x: C + r * Math.sin(rad(grados)), y: C - r * Math.cos(rad(grados)) });
+/** Medidor analógico: bisel cromado, carátula con marcas y números, aguja de acero con física de resorte (se pasa y se asienta) y cristal con reflejo. */
+export function AnalogGauge({ value = 72, min = 0, max = 100, label = "Pressure", unit = "PSI", ticks = 11, redline = 85, size = 320, bounce = 0.55, accent = "#ff6a2a", wander = false, interval = 2.8, className = "", style, }) {
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
+    const [auto, setAuto] = useState(null);
+    const actual = limitar(auto ?? value, min, max);
+    const rango = max - min || 1;
+    const fraccion = (v) => limitar((v - min) / rango, 0, 1);
+    const raiz = useRef(null);
+    const agujaRef = useRef(null);
+    const sombraRef = useRef(null);
+    const fis = useRef({ f: 0, v: 0, meta: 0, raf: 0, t: 0, visible: true, quieto: false });
+    const zeta = useRef(0.5);
+    zeta.current = 0.9 - 0.7 * limitar(bounce, 0, 1);
+    const pintar = (f) => {
+        // f puede pasarse un poco de 0..1 por el rebote: la aguja gira libre, sin tope.
+        const g = (-BARRIDO / 2 + f * BARRIDO).toFixed(3);
+        agujaRef.current?.setAttribute("transform", `rotate(${g} ${C} ${C})`);
+        sombraRef.current?.setAttribute("transform", `rotate(${g} ${C} ${C})`);
+    };
+    const correr = () => {
+        const s = fis.current;
+        if (s.raf || !s.visible)
+            return;
+        s.t = performance.now();
+        const paso = (ahora) => {
+            let dt = Math.min(0.04, Math.max(0, (ahora - s.t) / 1000));
+            s.t = ahora;
+            const w = 2 * Math.PI * 1.15;
+            while (dt > 0) {
+                const h = Math.min(dt, 1 / 240);
+                dt -= h;
+                s.v += (w * w * (s.meta - s.f) - 2 * zeta.current * w * s.v) * h;
+                s.f += s.v * h;
+            }
+            pintar(s.f);
+            if (Math.abs(s.f - s.meta) < 0.0004 && Math.abs(s.v) < 0.004) {
+                s.f = s.meta;
+                s.v = 0;
+                s.raf = 0;
+                pintar(s.f);
+                return;
+            }
+            if (!s.visible) {
+                s.raf = 0;
+                return;
+            }
+            s.raf = requestAnimationFrame(paso);
+        };
+        s.raf = requestAnimationFrame(paso);
+    };
+    // Entrada: la aguja parte del mínimo y se asienta en su valor. Con movimiento reducido va directo.
+    useEffect(() => {
+        const s = fis.current;
+        s.quieto = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        s.meta = fraccion(actual);
+        if (s.quieto) {
+            cancelAnimationFrame(s.raf);
+            s.raf = 0;
+            s.f = s.meta;
+            s.v = 0;
+            pintar(s.f);
+            return;
+        }
+        correr();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [actual, min, max]);
+    // Duerme fuera de pantalla.
+    useEffect(() => {
+        const el = raiz.current;
+        if (!el)
+            return;
+        const io = new IntersectionObserver(([e]) => {
+            fis.current.visible = e.isIntersecting;
+            if (e.isIntersecting && Math.abs(fis.current.f - fis.current.meta) > 0.0004)
+                correr();
+        });
+        io.observe(el);
+        return () => { io.disconnect(); cancelAnimationFrame(fis.current.raf); fis.current.raf = 0; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Modo demo: nuevos valores al azar cada cierto tiempo, solo si se ve.
+    useEffect(() => {
+        if (!wander || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            setAuto(null);
+            return;
+        }
+        let id = 0;
+        let previo = fraccion(actual);
+        const siguiente = () => {
+            if (fis.current.visible) {
+                let n = previo;
+                for (let i = 0; i < 6 && Math.abs(n - previo) < 0.28; i++)
+                    n = 0.08 + Math.random() * 0.88;
+                previo = n;
+                setAuto(min + n * rango);
+            }
+            id = window.setTimeout(siguiente, Math.max(0.8, interval) * 1000);
+        };
+        id = window.setTimeout(siguiente, 1800);
+        return () => window.clearTimeout(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wander, interval, min, max]);
+    const alMover = (e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        e.currentTarget.style.setProperty("--fag-x", limitar((e.clientX - r.left) / r.width, 0, 1).toFixed(3));
+        e.currentTarget.style.setProperty("--fag-y", limitar((e.clientY - r.top) / r.height, 0, 1).toFixed(3));
+    };
+    const alSalir = (e) => {
+        e.currentTarget.style.removeProperty("--fag-x");
+        e.currentTarget.style.removeProperty("--fag-y");
+    };
+    // Marcas: grandes con número y pequeñas entre ellas; las de la zona roja se pintan de rojo.
+    const segmentos = Math.max(2, ticks - 1);
+    const total = segmentos * SUBDIV;
+    const zonaRoja = redline < max;
+    const fRoja = fraccion(redline);
+    const marcas = Array.from({ length: total + 1 }, (_, m) => {
+        const f = m / total;
+        const grande = m % SUBDIV === 0;
+        const a = -BARRIDO / 2 + f * BARRIDO;
+        const p1 = polar(160, a);
+        const p2 = polar(grande ? 140 : 150, a);
+        return { ...p1, x2: p2.x, y2: p2.y, grande, roja: zonaRoja && f >= fRoja - 1e-6 };
+    });
+    const numeros = Array.from({ length: segmentos + 1 }, (_, i) => {
+        const f = i / segmentos;
+        const p = polar(116, -BARRIDO / 2 + f * BARRIDO);
+        const v = min + f * rango;
+        return { ...p, texto: String(Number(v.toFixed(1))), roja: zonaRoja && f >= fRoja - 1e-6 };
+    });
+    const arco = (() => {
+        if (!zonaRoja)
+            return "";
+        const a0 = -BARRIDO / 2 + fRoja * BARRIDO;
+        const a1 = BARRIDO / 2;
+        const p0 = polar(166, a0);
+        const p1 = polar(166, a1);
+        return `M ${p0.x.toFixed(2)} ${p0.y.toFixed(2)} A 166 166 0 ${a1 - a0 > 180 ? 1 : 0} 1 ${p1.x.toFixed(2)} ${p1.y.toFixed(2)}`;
+    })();
+    const f0 = -BARRIDO / 2;
+    const aguja = "M198.7 52 L192.6 200 L195.4 246 L204.6 246 L207.4 200 L201.3 52 Z";
+    const vars = { "--fag-size": `${size}px`, "--fag-accent": accent };
+    return (_jsxs("div", { ref: raiz, className: `furin-analog-gauge ${className}`, style: { ...vars, ...style }, role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Number(actual.toFixed(2)), "aria-valuetext": `${Number(actual.toFixed(1))} ${unit}`, onPointerMove: alMover, onPointerLeave: alSalir, children: [_jsx("div", { className: "furin-analog-gauge__bezel" }), _jsx("div", { className: "furin-analog-gauge__chamfer" }), _jsx("div", { className: "furin-analog-gauge__dial" }), _jsxs("svg", { className: "furin-analog-gauge__svg", viewBox: "0 0 400 400", "aria-hidden": "true", children: [_jsxs("defs", { children: [_jsx("filter", { id: `${uid}b`, x: "-60%", y: "-30%", width: "220%", height: "160%", children: _jsx("feGaussianBlur", { stdDeviation: "3.4" }) }), _jsxs("linearGradient", { id: `${uid}l`, x1: "0", x2: "1", y1: "0", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: "#ffffff" }), _jsx("stop", { offset: "0.55", stopColor: "#d3d8df" }), _jsx("stop", { offset: "1", stopColor: "#9aa1ab" })] }), _jsxs("linearGradient", { id: `${uid}r`, x1: "0", x2: "1", y1: "0", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: "#8c939d" }), _jsx("stop", { offset: "0.6", stopColor: "#525861" }), _jsx("stop", { offset: "1", stopColor: "#2b2f36" })] }), _jsx("clipPath", { id: `${uid}t`, children: _jsx("rect", { x: "150", y: "40", width: "100", height: "66" }) })] }), arco ? _jsx("path", { d: arco, className: "furin-analog-gauge__zone" }) : null, marcas.map((m, i) => (_jsx("line", { x1: m.x, y1: m.y, x2: m.x2, y2: m.y2, className: `furin-analog-gauge__tick${m.grande ? " is-major" : ""}${m.roja ? " is-red" : ""}` }, i))), numeros.map((n, i) => (_jsx("text", { x: n.x, y: n.y, textAnchor: "middle", dominantBaseline: "central", className: `furin-analog-gauge__num${n.roja ? " is-red" : ""}`, children: n.texto }, i))), _jsx("text", { x: C, y: "262", textAnchor: "middle", className: "furin-analog-gauge__label", children: label }), _jsx("text", { x: C, y: "292", textAnchor: "middle", className: "furin-analog-gauge__unit", children: unit }), _jsx("g", { transform: "translate(7 11)", opacity: "0.65", children: _jsx("g", { ref: sombraRef, transform: `rotate(${f0} ${C} ${C})`, filter: `url(#${uid}b)`, children: _jsx("path", { d: aguja, fill: "#000" }) }) }), _jsxs("g", { ref: agujaRef, transform: `rotate(${f0} ${C} ${C})`, children: [_jsx("path", { d: "M200 52 L198.7 52 L192.6 200 L195.4 246 L200 246 Z", fill: `url(#${uid}l)` }), _jsx("path", { d: "M200 52 L201.3 52 L207.4 200 L204.6 246 L200 246 Z", fill: `url(#${uid}r)` }), _jsxs("g", { clipPath: `url(#${uid}t)`, children: [_jsx("path", { d: "M200 52 L198.7 52 L192.6 200 L200 200 Z", className: "furin-analog-gauge__tipL" }), _jsx("path", { d: "M200 52 L201.3 52 L207.4 200 L200 200 Z", className: "furin-analog-gauge__tipR" })] }), _jsx("path", { d: "M200 56 L200 244", stroke: "rgba(255,255,255,0.6)", strokeWidth: "0.8" })] })] }), _jsx("div", { className: "furin-analog-gauge__hub" }), _jsxs("div", { className: "furin-analog-gauge__glass", children: [_jsx("span", { className: "furin-analog-gauge__glare" }), _jsx("span", { className: "furin-analog-gauge__streak" })] })] }));
+}
+export default AnalogGauge;

package/dist/ascii-text/AsciiText.css

@@ -0,0 +1,8 @@
+.furin-ascii-text {
+  position: relative;
+  display: block;
+  width: min(100%, 520px);
+  user-select: none;
+}
+.furin-ascii-text__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+.furin-ascii-text__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

package/dist/ascii-text/AsciiText.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from "react";
+export interface AsciiTextProps {
+    /** El texto que se dibuja con caracteres (acepta saltos de línea). */
+    children?: string;
+    /** Tamaño máximo de la letra del texto, en px (se reduce solo si no cabe). */
+    size?: number;
+    /** Tamaño de cada carácter ASCII, en px: más chico, más detalle. */
+    cell?: number;
+    /** Alto del lienzo, en px. */
+    height?: number;
+    /** Radio de la lente del cursor, en px. */
+    radius?: number;
+    /** Caracteres de menor a mayor densidad. */
+    charset?: string;
+    /** Cuando no hay cursor, una lente pasea sola por el texto. */
+    idle?: boolean;
+    /** Color de los caracteres. */
+    color?: string;
+    /** Color de los caracteres dentro de la lente. */
+    accent?: string;
+    /** Clase extra para el contenedor. */
+    className?: string;
+    /** Estilos extra para el contenedor. */
+    style?: CSSProperties;
+}
+/** El texto se dibuja con caracteres ASCII en un lienzo; una lente alrededor del cursor los reacomoda y los revuelve. */
+export declare function AsciiText({ children, size, cell, height, radius, charset, idle, color, accent, className, style, }: AsciiTextProps): import("react").JSX.Element;
+export default AsciiText;