ControlEffects
CSS-driven control effects (top-shine, ripple, hover-circle) that follow every control app-wide through the emitted anatomy — portalled surfaces included.
Preview
Local demo scoped to this frame — real activation is skin-level, see Activation below.
Root-mountedMounted once above its targets and attached through the emitted anatomy — no component imports it, and removing the item removes every byte. Not installed means no import, no listener, no cost.
Installs to components/refined-ui/extensions/control-effects.ts. Extensions are optional items layered on the library — no component bundle carries them.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/control-effects.jsonActivation
Declare effects on your skin (DS-level, covers portals) and mount the runtime once for in-tree controls; a subtree ControlEffectsRoot stays the caller-wins local override.
// skin.config.tsx — a brand's controls either all ripple or none doexport const skin: RefinedSkin = { id: "my-brand", effects: ["ripple"],};// app layout — mirrors the resolved list on <html> for in-tree controls<ControlEffectsRuntime />// or scope effects to one subtree instead (caller-wins local override)<ControlEffectsRoot effects={["top-shine", "ripple"]}> <Toolbar /></ControlEffectsRoot>Source
Installed extension source
import type { ControlEffect } from "@/components/refined-ui/contracts";export type { ControlEffect };export type ControlEffectValue = ControlEffect | ControlEffect[];export function controlEffectsAttribute(effects?: ControlEffectValue) { if (!effects) return undefined; const values = Array.isArray(effects) ? effects : [effects]; const value = values.filter(Boolean).join(" "); return value.length > 0 ? value : undefined;}