Circuit Feature Map
Features as nodes on a hairline circuit around a core chip: traces draw in on scroll, pulses run out of the core to each node, and hovering a node lights its trace, its pin and the core.
DOM + CSS0 deps1 file · 19 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* CircuitFeatureMap — features as nodes on a hairline circuit.
*
* Feature cards sit around a core chip, three on each side on wide
* screens, joined to the core's pins by traces with 45-degree chamfered
* corners. The traces draw in as the section scrolls into view, then
* pulses run out of the core to each node on a slow cycle, lighting cells
* in the core as they leave and flashing at each node as they land.
* Hovering or focusing a node lights its trace, its pin, the core and its
* cells. On narrow screens the core sits on top and a bus runs down the
* left edge.
*
* Part of the Dark Precision kit: OLED black, 1px hairlines, one cool accent
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
A features section drawn as the hardware it describes. Six feature cards sit around a core chip, three on each side, each joined to its own pin on the core by a hairline trace with 45-degree chamfered corners. When the section scrolls into view the traces draw themselves in, one after another; then pulses of light run out of the core along each trace on a slow cycle, lighting a scatter of cells in the core as they leave and flashing where they land on the card. Hover or focus a card and its trace, its pin, its cells and the core's border all light up. On narrow screens the core moves to the top and a bus runs down the left edge to every card. The routing is measured from the real layout, so it redraws itself on resize.
Curator’s note
The Dark Precision kit's feature section (slot 7), cut from dark-precision-site. Pro: a measured SVG circuit with chamfered routing, scroll-triggered draw-in, synced pulse, pin and cell choreography, and a responsive bus layout.
