@flux-ui/visuals 0.0.0

package/src/component/FluxVisualFlickeringGrid.vue

@@ -0,0 +1,159 @@
+<template>
+    <canvas
+        ref="canvas"
+        aria-hidden="true"
+        :class="$style.flickeringGrid"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { mulberry32 } from '@basmilius/utils';
+    import { prefersReducedMotion, useInView } from '@flux-ui/internals';
+    import { computed, unref, useTemplateRef, watch } from 'vue';
+    import $style from '~flux/visuals/css/component/Visual.module.scss';
+
+    const {
+        color = '#1d4ed8',
+        flickerChance = 0.15,
+        gap = 6,
+        maxOpacity = 0.3,
+        size = 3
+    } = defineProps<{
+        readonly color?: string;
+        readonly flickerChance?: number;
+        readonly gap?: number;
+        readonly maxOpacity?: number;
+        readonly size?: number;
+    }>();
+
+    const canvasRef = useTemplateRef('canvas');
+
+    const inView = useInView(canvasRef);
+
+    const mulberry = mulberry32(13);
+
+    const rgb = computed(() => {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+
+        const context = canvas.getContext('2d');
+
+        if (!context) {
+            return [0, 0, 0];
+        }
+
+        context.fillStyle = color;
+        context.fillRect(0, 0, 1, 1);
+
+        return context.getImageData(0, 0, 1, 1).data;
+    });
+
+    function draw(context: CanvasRenderingContext2D, width: number, height: number, columns: number, rows: number, squares: Float32Array, dpr: number): void {
+        context.clearRect(0, 0, width * dpr, height * dpr);
+
+        const [r, g, b] = unref(rgb);
+
+        for (let i = 0; i < columns; ++i) {
+            for (let j = 0; j < rows; ++j) {
+                const opacity = squares[i * rows + j];
+                context.fillStyle = `rgb(${r} ${g} ${b} / ${opacity})`;
+                context.fillRect(
+                    (i * (size + gap) + width / 2 - (columns / 2 * (size + gap) - gap / 2)) * dpr,
+                    (j * (size + gap) + height / 2 - (rows / 2 * (size + gap) - gap / 2)) * dpr,
+                    size * dpr,
+                    size * dpr
+                );
+            }
+        }
+    }
+
+    function setup(canvas: HTMLCanvasElement) {
+        const width = canvas.clientWidth;
+        const height = canvas.clientHeight;
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+
+        const columns = Math.ceil(width / (size + gap));
+        const rows = Math.ceil(height / (size + gap));
+        const squares = new Float32Array(columns * rows);
+
+        for (let i = 0; i < squares.length; ++i) {
+            squares[i] = mulberry.next() * maxOpacity;
+        }
+
+        return {
+            width,
+            height,
+            columns,
+            rows,
+            squares,
+            dpr
+        };
+    }
+
+    function tick(squares: Float32Array, delta: number): void {
+        for (let i = 0; i < squares.length; ++i) {
+            if (mulberry.next() < flickerChance * delta) {
+                squares[i] = mulberry.next() * maxOpacity;
+            }
+        }
+    }
+
+    watch([canvasRef, inView], ([canvas, inView], _, onCleanup) => {
+        if (!canvas || !inView) {
+            return;
+        }
+
+        const context = canvas.getContext('2d');
+
+        if (!context) {
+            return;
+        }
+
+        let frame = 0;
+        let lastTime = 0;
+        let {width, height, columns, rows, squares, dpr} = setup(canvas);
+
+        const reducedMotion = prefersReducedMotion();
+
+        const onResize = () => {
+            ({width, height, columns, rows, squares, dpr} = setup(canvas));
+
+            if (reducedMotion) {
+                draw(context, width, height, columns, rows, squares, dpr);
+            }
+        };
+
+        window.addEventListener('resize', onResize, {passive: true});
+
+        if (reducedMotion) {
+            draw(context, width, height, columns, rows, squares, dpr);
+
+            onCleanup(() => {
+                window.removeEventListener('resize', onResize);
+            });
+
+            return;
+        }
+
+        const animate = (time: number): void => {
+            const delta = lastTime > 0 ? (time - lastTime) / 1000 : 0;
+            lastTime = time;
+
+            tick(squares, delta);
+            draw(context, width, height, columns, rows, squares, dpr);
+            frame = requestAnimationFrame(animate);
+        };
+
+        frame = requestAnimationFrame(animate);
+
+        onCleanup(() => {
+            window.removeEventListener('resize', onResize);
+            cancelAnimationFrame(frame);
+        });
+    }, {immediate: true});
+</script>

package/src/component/FluxVisualGridPattern.vue

@@ -0,0 +1,128 @@
+<template>
+    <svg
+        ref="root"
+        aria-hidden="true"
+        :class="$style.gridPattern">
+        <defs>
+            <pattern
+                :id="id"
+                :width="width"
+                :height="height"
+                patternUnits="userSpaceOnUse"
+                :x="-1"
+                :y="-1">
+                <path
+                    :d="`M.5 ${height}V.5H${width}`"
+                    fill="none"
+                    :stroke-dasharray="strokeDasharray"/>
+            </pattern>
+
+            <pattern
+                v-if="glow"
+                :id="glowId"
+                :width="width"
+                :height="height"
+                patternUnits="userSpaceOnUse"
+                :x="-1"
+                :y="-1">
+                <path
+                    :class="$glow.glowLine"
+                    :d="`M.5 ${height}V.5H${width}`"
+                    fill="none"
+                    :stroke-dasharray="strokeDasharray"/>
+            </pattern>
+        </defs>
+
+        <rect
+            width="100%"
+            height="100%"
+            stroke-width="0"
+            :fill="`url(#${id})`"/>
+
+        <svg
+            v-if="squares?.length"
+            style="overflow: visible;">
+            <rect
+                v-for="[x, y] of squares"
+                :key="`${x}-${y}`"
+                :width="width - 1"
+                :height="height - 1"
+                :x="x * width"
+                :y="y * height"
+                stroke-width="0"/>
+        </svg>
+
+        <rect
+            v-if="glow"
+            :class="[$glow.glowLayer, active && $glow.isActive]"
+            width="100%"
+            height="100%"
+            stroke-width="0"
+            :fill="`url(#${glowId})`"/>
+    </svg>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { ref, unref, useId, useTemplateRef, watch } from 'vue';
+    import $glow from '~flux/visuals/css/component/PatternGlow.module.scss';
+    import $style from '~flux/visuals/css/component/Visual.module.scss';
+
+    const {
+        width = 42,
+        height = 42,
+        strokeDasharray = 0,
+        squares,
+        glow = false
+    } = defineProps<{
+        readonly width?: number;
+        readonly height?: number;
+        readonly strokeDasharray?: number | string;
+        readonly squares?: Array<[x: number, y: number]>;
+        readonly glow?: boolean;
+    }>();
+
+    const id = useId();
+    const glowId = `${id}-glow`;
+    const rootRef = useTemplateRef<SVGSVGElement>('root');
+    const active = ref(false);
+
+    // The pattern svg has pointer-events: none, so the cursor is tracked on the
+    // parent scroll/overflow container instead. The position is written straight
+    // to CSS custom properties to avoid a re-render on every pointermove.
+    watch([rootRef, () => glow], (_, __, onCleanup) => {
+        const root = unref(rootRef);
+
+        if (!glow || !root || !root.parentElement) {
+            return;
+        }
+
+        const parent = root.parentElement;
+
+        const onPointerMove = (event: PointerEvent): void => {
+            const rect = parent.getBoundingClientRect();
+            root.style.setProperty('--pattern-glow-x', `${event.clientX - rect.left}px`);
+            root.style.setProperty('--pattern-glow-y', `${event.clientY - rect.top}px`);
+        };
+
+        const onPointerEnter = (): void => {
+            active.value = true;
+        };
+
+        const onPointerLeave = (): void => {
+            active.value = false;
+        };
+
+        parent.addEventListener('pointermove', onPointerMove, {passive: true});
+        parent.addEventListener('pointerenter', onPointerEnter);
+        parent.addEventListener('pointerleave', onPointerLeave);
+
+        onCleanup(() => {
+            active.value = false;
+            parent.removeEventListener('pointermove', onPointerMove);
+            parent.removeEventListener('pointerenter', onPointerEnter);
+            parent.removeEventListener('pointerleave', onPointerLeave);
+        });
+    }, {immediate: true});
+</script>

package/src/component/FluxVisualHighlighter.vue

@@ -0,0 +1,217 @@
+<template>
+    <span
+        ref="target"
+        :class="$style.highlighter">
+        <slot/>
+    </span>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { prefersReducedMotion, useInView } from '@flux-ui/internals';
+    import { annotate } from 'rough-notation';
+    import { computed, onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue';
+    import { useHighlighterGroupInjection, type HighlighterGroupEntry, type HighlighterVariant } from '~flux/visuals/composable/private';
+    import $style from '~flux/visuals/css/component/Highlighter.module.scss';
+
+    const emit = defineEmits<{
+        hidden: [];
+        shown: [];
+    }>();
+
+    // The annotation props deliberately have no destructure defaults: an unset
+    // prop must stay distinguishable from an explicit one, so an enclosing group
+    // can supply the value instead. The effective* computeds resolve the chain.
+    const {
+        variant,
+        color,
+        strokeWidth,
+        animationDuration,
+        iterations,
+        padding,
+        multiline,
+        whenInView = false
+    } = defineProps<{
+        readonly variant?: HighlighterVariant;
+        readonly color?: string;
+        readonly strokeWidth?: number;
+        readonly animationDuration?: number;
+        readonly iterations?: number;
+        readonly padding?: number;
+        readonly multiline?: boolean;
+        readonly whenInView?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const group = useHighlighterGroupInjection();
+
+    const targetRef = useTemplateRef('target');
+
+    // Standalone in-view tracking. In a group the parent owns the reveal timing,
+    // so no observer is set up at all.
+    const inView = group ? shallowRef(true) : useInView(targetRef, {initial: !whenInView});
+
+    const effectiveVariant = computed(() => variant ?? group?.defaults.variant ?? 'highlight');
+    const effectiveColor = computed(() => color ?? group?.defaults.color ?? 'var(--warning-200)');
+    const effectiveStrokeWidth = computed(() => strokeWidth ?? group?.defaults.strokeWidth ?? 1.5);
+    const effectiveAnimationDuration = computed(() => animationDuration ?? group?.defaults.animationDuration ?? 500);
+    const effectiveIterations = computed(() => iterations ?? group?.defaults.iterations ?? 2);
+    const effectivePadding = computed(() => padding ?? group?.defaults.padding ?? 2);
+    const effectiveMultiline = computed(() => multiline ?? group?.defaults.multiline ?? true);
+
+    let annotation: ReturnType<typeof annotate> | null = null;
+    let entry: HighlighterGroupEntry | null = null;
+    let observer: ResizeObserver | null = null;
+    let settleTimer: number | undefined;
+    let shownTimer: number | undefined;
+    let revealed = false;
+
+    // rough-notation has no completion callback, so shown is emitted after the
+    // draw animation's duration, or immediately when it draws without animation.
+    function emitShown(): void {
+        window.clearTimeout(shownTimer);
+
+        if (prefersReducedMotion()) {
+            emit('shown');
+            return;
+        }
+
+        shownTimer = window.setTimeout(() => emit('shown'), effectiveAnimationDuration.value);
+    }
+
+    function show(): void {
+        if (!annotation) {
+            return;
+        }
+
+        revealed = true;
+        stopSettleWatch();
+        annotation.show();
+        emitShown();
+    }
+
+    function hide(): void {
+        if (!annotation) {
+            return;
+        }
+
+        window.clearTimeout(shownTimer);
+        annotation.hide();
+        emit('hidden');
+    }
+
+    function replay(): void {
+        if (!annotation) {
+            return;
+        }
+
+        annotation.hide();
+        annotation.show();
+        emitShown();
+    }
+
+    // Standalone: draw once, with the intro animation, on the final geometry.
+    // rough-notation keeps the drawn annotation aligned on later resizes itself.
+    function reveal(): void {
+        if (revealed || !annotation || !inView.value) {
+            return;
+        }
+
+        show();
+    }
+
+    function stopSettleWatch(): void {
+        window.clearTimeout(settleTimer);
+        observer?.disconnect();
+        observer = null;
+    }
+
+    function build(): void {
+        annotation?.remove();
+        annotation = null;
+        stopSettleWatch();
+        revealed = false;
+
+        const element = targetRef.value;
+
+        if (!element) {
+            return;
+        }
+
+        annotation = annotate(element, {
+            type: effectiveVariant.value,
+            color: effectiveColor.value,
+            strokeWidth: effectiveStrokeWidth.value,
+            animationDuration: effectiveAnimationDuration.value,
+            iterations: effectiveIterations.value,
+            padding: effectivePadding.value,
+            multiline: effectiveMultiline.value,
+            animate: !prefersReducedMotion()
+        });
+
+        // In a group the parent collects the annotations and drives the cascade.
+        if (group) {
+            group.notify();
+            return;
+        }
+
+        if (typeof ResizeObserver === 'undefined') {
+            reveal();
+            return;
+        }
+
+        // The surrounding chrome (preview panels, web-font swaps) can reflow right
+        // after mount, which would otherwise play the intro animation where the
+        // text sat *before* it settled. Debounce until the layout is quiet, then
+        // draw on the final geometry.
+        observer = new ResizeObserver(() => {
+            window.clearTimeout(settleTimer);
+            settleTimer = window.setTimeout(() => reveal(), 80);
+        });
+        observer.observe(element);
+        observer.observe(document.body);
+    }
+
+    onMounted(() => {
+        const element = targetRef.value;
+
+        if (group && element) {
+            entry = {element, getAnnotation: () => annotation};
+            group.add(entry);
+        }
+
+        build();
+    });
+
+    // The annotation type is immutable, so any prop change rebuilds it from scratch.
+    watch([effectiveVariant, effectiveColor, effectiveStrokeWidth, effectiveAnimationDuration, effectiveIterations, effectivePadding, effectiveMultiline], () => build());
+
+    // Standalone reveal once the element scrolls into view (whenInView).
+    watch(inView, () => {
+        if (!group) {
+            reveal();
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (group && entry) {
+            group.remove(entry);
+            entry = null;
+        }
+
+        window.clearTimeout(shownTimer);
+        stopSettleWatch();
+        annotation?.remove();
+        annotation = null;
+    });
+
+    defineExpose({
+        hide,
+        replay,
+        show
+    });
+</script>

package/src/component/FluxVisualHighlighterGroup.vue

@@ -0,0 +1,20 @@
+<template>
+    <span :class="$style.highlighterGroup">
+        <slot/>
+    </span>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useHighlighterGroup, type HighlighterGroupProps } from '~flux/visuals/composable/private';
+    import $style from '~flux/visuals/css/component/Highlighter.module.scss';
+
+    const props = defineProps<HighlighterGroupProps>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    useHighlighterGroup(props);
+</script>

package/src/component/FluxVisualNoise.vue

@@ -0,0 +1,31 @@
+<template>
+    <div
+        aria-hidden="true"
+        :class="clsx($style.noise, animated && $style.animated)"
+        :style="style"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { computed } from 'vue';
+    import $style from '~flux/visuals/css/component/Noise.module.scss';
+
+    type NoiseBlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'soft-light' | 'plus-lighter';
+
+    const {
+        animated = false,
+        blend = 'overlay',
+        opacity = 0.05
+    } = defineProps<{
+        readonly animated?: boolean;
+        readonly blend?: NoiseBlendMode;
+        readonly opacity?: number;
+    }>();
+
+    const style = computed(() => ({
+        '--noise-blend': blend,
+        '--noise-opacity': opacity
+    }));
+</script>