@flux-ui/visuals 0.0.0

package/src/css/component/Highlighter.module.scss

@@ -0,0 +1,7 @@
+.highlighter {
+    position: relative;
+}
+
+.highlighterGroup {
+    display: contents;
+}

package/src/css/component/Noise.module.scss

@@ -0,0 +1,80 @@
+.noise {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    opacity: var(--noise-opacity, .05);
+    // Raw feTurbulence emits four independent noise channels, so the alpha is
+    // also noise and the grain is a faint, half-transparent colored static that
+    // washes out to nothing under a low opacity. The filter runs in sRGB (so the
+    // grain stays centered on mid-grey instead of being gamma-lifted toward
+    // white), collapses to a single opaque grey channel and boosts its contrast,
+    // giving a neutral film grain that reads clearly even at a few percent.
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+    mix-blend-mode: var(--noise-blend, overlay);
+
+    // The overlay blend has little to bite into on a dark surface, so the grain
+    // is lifted to stay perceptible.
+    [dark] & {
+        opacity: calc(var(--noise-opacity, .05) * 1.5);
+    }
+}
+
+.animated {
+    animation: fluxVisualNoiseShift .6s steps(1) infinite;
+}
+
+// Discrete position jumps read as film grain without a per-frame script.
+@keyframes fluxVisualNoiseShift {
+    0% {
+        background-position: 0 0;
+    }
+
+    10% {
+        background-position: -12px 6px;
+    }
+
+    20% {
+        background-position: 10px -14px;
+    }
+
+    30% {
+        background-position: -6px 12px;
+    }
+
+    40% {
+        background-position: 14px 4px;
+    }
+
+    50% {
+        background-position: -14px -8px;
+    }
+
+    60% {
+        background-position: 8px 14px;
+    }
+
+    70% {
+        background-position: -10px -12px;
+    }
+
+    80% {
+        background-position: 12px 8px;
+    }
+
+    90% {
+        background-position: -4px -14px;
+    }
+
+    100% {
+        background-position: 0 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .animated {
+        animation: none;
+    }
+}

package/src/css/component/NumberFlow.module.scss

@@ -0,0 +1,5 @@
+.numberFlow {
+    font-variant-numeric: tabular-nums;
+    display: inline-block;
+    white-space: nowrap;
+}

package/src/css/component/PatternGlow.module.scss

@@ -0,0 +1,19 @@
+.glowLayer {
+    transition: opacity .25s ease;
+    pointer-events: none;
+    opacity: 0;
+    -webkit-mask: radial-gradient(circle var(--pattern-glow-size, 120px) at var(--pattern-glow-x, 50%) var(--pattern-glow-y, 50%), #000 0%, transparent 100%);
+    mask: radial-gradient(circle var(--pattern-glow-size, 120px) at var(--pattern-glow-x, 50%) var(--pattern-glow-y, 50%), #000 0%, transparent 100%);
+}
+
+.isActive {
+    opacity: 1;
+}
+
+.glowDot {
+    fill: var(--primary-500);
+}
+
+.glowLine {
+    stroke: var(--primary-500);
+}

package/src/css/component/Ping.module.scss

@@ -0,0 +1,44 @@
+.ping {
+    position: relative;
+    display: inline-block;
+    width: var(--ping-size);
+    height: var(--ping-size);
+    pointer-events: none;
+    color: var(--ping-color);
+    border-radius: 50%;
+    background: currentColor;
+}
+
+.ping::before,
+.ping::after {
+    position: absolute;
+    inset: 0;
+    content: '';
+    animation: visualPing calc(var(--ping-duration) * 1s) cubic-bezier(0, 0, .2, 1) infinite;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+.ping::after {
+    animation-delay: calc(var(--ping-duration) * -.5s);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ping::before,
+    .ping::after {
+        content: none;
+    }
+}
+
+@keyframes visualPing {
+    0% {
+        transform: scale(1);
+        opacity: .5;
+    }
+
+    75%,
+    100% {
+        transform: scale(2.5);
+        opacity: 0;
+    }
+}

package/src/css/component/SlotText.module.scss

@@ -0,0 +1,43 @@
+.slotText {
+    display: inline-flex;
+    white-space: pre;
+}
+
+.charSlot {
+    line-height: 1.3;
+    position: relative;
+    display: inline-flex;
+    // Clip only vertically: the roll needs a top/bottom mask, but glyph side
+    // bearings, kerning overhang and the settle tilt must stay visible so
+    // letters never look cropped.
+    overflow: hidden;
+    overflow-x: visible;
+    overflow-y: clip;
+    // Cells must never flex-shrink, otherwise a width-constrained line crushes
+    // them into overlapping slivers instead of letting the row overflow.
+    flex: none;
+    justify-content: center;
+    vertical-align: bottom;
+}
+
+// Cells appearing from or collapsing to empty change width drastically, so clip
+// them horizontally too while they resize — their glyph wipes in/out with the
+// cell instead of spilling over the neighbours.
+.charSlot.isResizing {
+    overflow-x: clip;
+}
+
+.charSizer {
+    visibility: hidden;
+    white-space: pre;
+}
+
+.charFace {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: pre;
+    will-change: transform;
+}

package/src/css/component/TextScramble.module.scss

@@ -0,0 +1,5 @@
+.textScramble {
+    font-variant-numeric: tabular-nums;
+    display: inline-block;
+    white-space: pre;
+}

package/src/css/component/TextShimmer.module.scss

@@ -0,0 +1,54 @@
+.textShimmer {
+    display: inline-block;
+    animation: textShimmerSweep var(--shimmer-duration, 2s) linear infinite;
+    color: transparent;
+    background-image: linear-gradient(
+        90deg,
+        var(--shimmer-base, var(--gray-400)) calc(50% - var(--shimmer-spread, 15) * 1%),
+        var(--shimmer-color, var(--gray-950)) 50%,
+        var(--shimmer-base, var(--gray-400)) calc(50% + var(--shimmer-spread, 15) * 1%)
+    );
+    // Both edges of the gradient are the base color, so tiling it seamlessly
+    // keeps the text fully painted at every step: outside the moving highlight
+    // band the text is always covered by the base color instead of falling off
+    // the single tile into a transparent (clipped) gap. A no-repeat background
+    // only covers the text for background-position 0%..100%; past that the tile
+    // slides off and the text vanishes.
+    background-repeat: repeat;
+    background-position: 100% center;
+    background-clip: text;
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    [dark] & {
+        background-image: linear-gradient(
+            90deg,
+            var(--shimmer-base, var(--gray-500)) calc(50% - var(--shimmer-spread, 15) * 1%),
+            var(--shimmer-color, var(--gray-50)) 50%,
+            var(--shimmer-base, var(--gray-500)) calc(50% + var(--shimmer-spread, 15) * 1%)
+        );
+    }
+
+    // No sweep when reduced motion is requested: fall back to a plain, solid
+    // text color so the label stays legible without animating.
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        color: var(--shimmer-base, var(--gray-500));
+        background: none;
+        -webkit-text-fill-color: currentColor;
+    }
+}
+
+// The 100% to -100% travel shifts the background by exactly one tile width
+// (background-size is 200%), so the repeated pattern lands back on itself and
+// the loop restarts without a jump.
+@keyframes textShimmerSweep {
+    from {
+        background-position: 100% center;
+    }
+
+    to {
+        background-position: -100% center;
+    }
+}

package/src/css/component/Visual.module.scss

@@ -0,0 +1,71 @@
+@property --shine-degrees {
+    syntax: '<angle>';
+    initial-value: 0deg;
+    inherits: false;
+}
+
+.fillVisual {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.animatedColors {
+    composes: fillVisual;
+
+    filter: blur(60px) saturate(180%);
+}
+
+.dotPattern {
+    composes: fillVisual;
+
+    fill: var(--gray-300);
+    pointer-events: none;
+}
+
+.flickeringGrid {
+    composes: fillVisual;
+
+    pointer-events: none;
+}
+
+.gridPattern {
+    composes: fillVisual;
+
+    fill: var(--gray-100);
+    stroke: var(--gray-300);
+    pointer-events: none;
+}
+
+.borderShine {
+    position: relative;
+
+    --shine-radius: var(--radius);
+    --shine-mask: linear-gradient(#fff #{0} #{0}) content-box, linear-gradient(#fff #{0} #{0});
+
+    &::before {
+        position: absolute;
+        display: block;
+        inset: calc(var(--shine-offset) * -1px);
+        padding: calc(var(--shine-width) * 1px);
+        content: '';
+        background: conic-gradient(from var(--shine-degrees), #{var(--shine-colors)});
+        border-radius: var(--shine-radius);
+        pointer-events: none;
+        animation: borderShinePosition calc(var(--shine-duration) * 1s) linear infinite;
+        mask: var(--shine-mask);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+    }
+}
+
+@keyframes borderShinePosition {
+    from {
+        --shine-degrees: 0deg;
+    }
+
+    to {
+        --shine-degrees: 360deg;
+    }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/types.d.ts

@@ -0,0 +1,13 @@
+declare module '*.module.css' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.module.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.svg' {
+    export = string;
+}