sdaia-ui 1.0.1

package/src/components/ScatterChart/ScatterChart.variants.ts

@@ -0,0 +1,162 @@
+import type { ScatterChartType, ScatterPoint } from './ScatterChart.types';
+
+// ─── Layout ──────────────────────────────────────────────────────────────────
+
+export const ROOT_BASE =
+  'flex flex-col gap-spacing-lg min-w-[350px] w-full';
+
+export const TITLE_CLASSES =
+  'text-text-sm font-[600] text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
+
+export const CHART_BODY =
+  'flex flex-col gap-spacing-xs flex-1 min-h-0 w-full';
+
+export const Y_AND_CHART_ROW =
+  'flex gap-spacing-md flex-1 min-h-0 w-full';
+
+// Y-axis column: top/bottom padding matches py-spacing-md of chart area so labels
+// align with the first and last grid lines.
+export const Y_AXIS_CONTAINER =
+  'shrink-0 flex flex-col justify-between py-spacing-md';
+
+// Each label sits on a zero-height row so grid lines sit between labels.
+export const Y_AXIS_ROW =
+  'h-0 overflow-visible flex items-center justify-end';
+
+export const Y_AXIS_LABEL =
+  'text-text-sm font-[400] text-[rgba(31,42,55,1)] dark:text-[rgba(209,213,219,1)] whitespace-nowrap';
+
+// Invisible spacer that mirrors the Y-axis width, allowing X-axis labels to
+// start where the chart area starts (CSS-only, no JS measurement).
+export const Y_AXIS_SPACER =
+  'shrink-0 invisible select-none aria-hidden';
+
+// Chart area: `relative` so dots and grid overlay use absolute positioning.
+export const CHART_AREA =
+  'relative flex-1 min-h-0 min-w-0 min-h-[240px]';
+
+// Grid: stacks visual horizontal lines at equal intervals via justify-between.
+export const GRID_OVERLAY =
+  'absolute inset-0 flex flex-col justify-between py-spacing-md pointer-events-none';
+
+export const GRID_LINE =
+  'w-full h-0 shrink-0 border-t border-solid border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]';
+
+// Vertical grid lines — one per X-tick, evenly distributed (justify-between).
+export const GRID_V_OVERLAY =
+  'absolute inset-0 flex justify-between pointer-events-none';
+
+export const GRID_V_LINE =
+  'h-full w-0 border-l border-solid border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]';
+
+// Dots are clipped to the chart area. py-spacing-md aligns with grid overlay.
+export const DOTS_WRAPPER =
+  'absolute inset-x-0 top-[8px] bottom-[8px] overflow-hidden';
+
+export const DOT_BASE =
+  'absolute size-[8px] rounded-full -translate-x-1/2 -translate-y-1/2 bg-[rgba(27,131,84,1)] border border-[rgba(22,106,69,1)]';
+
+// X-axis row beneath chart area.
+export const X_AXIS_ROW =
+  'flex justify-between';
+
+export const X_AXIS_LABEL =
+  'text-text-sm font-[400] text-[rgba(31,42,55,1)] dark:text-[rgba(209,213,219,1)] whitespace-nowrap';
+
+// ─── Default Y ticks (top → bottom) ──────────────────────────────────────────
+// Empty strings are invisible spacer rows so the visible labeled rows align
+// with grid-line positions produced by justify-between over 6 rows total.
+
+const Y_TICKS_LINEAR: string[] = ['', '800', '', '400', '', '0'];
+const Y_TICKS_SIN: string[] = ['', '1', '', '0', '', '-1'];
+const Y_TICKS_NO_TREND: string[] = ['', '100', '', '50', '', '0'];
+const Y_TICKS_SQUARE: string[] = ['', '10000', '', '5000', '', '0'];
+
+// ─── Default X ticks (LTR left → right) ──────────────────────────────────────
+
+const X_TICKS_LINEAR: string[] = ['0', '', '250', '', '500', '', '750', '', '1000'];
+const X_TICKS_SIN: string[] = ['0', '', '90', '', '180', '', '270', '', '360'];
+const X_TICKS_NO_TREND: string[] = ['0', '', '25', '', '50', '', '75', '', '100'];
+const X_TICKS_SQUARE: string[] = ['0', '', '25', '', '50', '', '75', '', '100'];
+
+// ─── Domain defaults ──────────────────────────────────────────────────────────
+// yMax is intentionally larger than the top labeled tick so that the "800"
+// label sits at 20% from the top (not 0%) — matching the spacer row position.
+
+interface DomainDefaults {
+  xMin: number; xMax: number;
+  yMin: number; yMax: number;
+}
+
+const DOMAINS: Record<ScatterChartType, DomainDefaults> = {
+  Linear:   { xMin: 0, xMax: 1000, yMin: 0, yMax: 1000 },
+  Sin:      { xMin: 0, xMax: 360,  yMin: -1.25, yMax: 1.25 },
+  'No Trend': { xMin: 0, xMax: 100, yMin: 0, yMax: 125 },
+  Square:   { xMin: 0, xMax: 100,  yMin: 0, yMax: 12500 },
+};
+
+// ─── Default scatter-point data ───────────────────────────────────────────────
+
+const POINTS_LINEAR: ScatterPoint[] = [
+  { x: 50,  y: 30  }, { x: 100, y: 90  }, { x: 150, y: 130 }, { x: 200, y: 210 },
+  { x: 250, y: 260 }, { x: 300, y: 320 }, { x: 350, y: 370 }, { x: 400, y: 410 },
+  { x: 450, y: 450 }, { x: 500, y: 510 }, { x: 550, y: 560 }, { x: 600, y: 590 },
+  { x: 650, y: 640 }, { x: 700, y: 700 }, { x: 750, y: 740 }, { x: 800, y: 790 },
+  { x: 850, y: 840 }, { x: 900, y: 880 }, { x: 950, y: 930 }, { x: 1000, y: 970 },
+];
+
+const POINTS_SIN: ScatterPoint[] = [
+  { x: 0,   y: 0    }, { x: 15,  y: 0.259 }, { x: 30,  y: 0.5   }, { x: 45,  y: 0.707 },
+  { x: 60,  y: 0.866 }, { x: 75,  y: 0.966 }, { x: 90,  y: 1.0  }, { x: 105, y: 0.966 },
+  { x: 120, y: 0.866 }, { x: 135, y: 0.707 }, { x: 150, y: 0.5  }, { x: 165, y: 0.259 },
+  { x: 180, y: 0    }, { x: 195, y: -0.259 }, { x: 210, y: -0.5  }, { x: 225, y: -0.707 },
+  { x: 240, y: -0.866 }, { x: 255, y: -0.966 }, { x: 270, y: -1.0 }, { x: 285, y: -0.966 },
+  { x: 300, y: -0.866 }, { x: 315, y: -0.707 }, { x: 330, y: -0.5  }, { x: 345, y: -0.259 },
+  { x: 360, y: 0    },
+];
+
+const POINTS_NO_TREND: ScatterPoint[] = [
+  { x: 5,  y: 72 }, { x: 12, y: 18 }, { x: 18, y: 91 }, { x: 25, y: 44 },
+  { x: 31, y: 63 }, { x: 38, y: 27 }, { x: 44, y: 85 }, { x: 50, y: 52 },
+  { x: 57, y: 38 }, { x: 63, y: 77 }, { x: 69, y: 13 }, { x: 75, y: 60 },
+  { x: 82, y: 95 }, { x: 88, y: 31 }, { x: 94, y: 69 }, { x: 100, y: 47 },
+];
+
+const POINTS_SQUARE: ScatterPoint[] = [
+  { x: 0,  y: 0    }, { x: 10, y: 100  }, { x: 20, y: 400  }, { x: 30, y: 900  },
+  { x: 40, y: 1600 }, { x: 50, y: 2500 }, { x: 60, y: 3600 }, { x: 70, y: 4900 },
+  { x: 80, y: 6400 }, { x: 90, y: 8100 }, { x: 100, y: 10000 },
+];
+
+// ─── Preset lookup helpers ────────────────────────────────────────────────────
+
+export function getDefaultPoints(type: ScatterChartType): ScatterPoint[] {
+  switch (type) {
+    case 'Sin':       return POINTS_SIN;
+    case 'No Trend':  return POINTS_NO_TREND;
+    case 'Square':    return POINTS_SQUARE;
+    default:          return POINTS_LINEAR;
+  }
+}
+
+export function getDefaultYTicks(type: ScatterChartType): string[] {
+  switch (type) {
+    case 'Sin':       return Y_TICKS_SIN;
+    case 'No Trend':  return Y_TICKS_NO_TREND;
+    case 'Square':    return Y_TICKS_SQUARE;
+    default:          return Y_TICKS_LINEAR;
+  }
+}
+
+export function getDefaultXTicks(type: ScatterChartType): string[] {
+  switch (type) {
+    case 'Sin':       return X_TICKS_SIN;
+    case 'No Trend':  return X_TICKS_NO_TREND;
+    case 'Square':    return X_TICKS_SQUARE;
+    default:          return X_TICKS_LINEAR;
+  }
+}
+
+export function getDefaultDomain(type: ScatterChartType): DomainDefaults {
+  return DOMAINS[type];
+}

package/src/components/ScatterChart/index.ts

@@ -0,0 +1,2 @@
+export { ScatterChart } from './ScatterChart';
+export type { ScatterChartProps, ScatterChartType, ScatterPoint } from './ScatterChart.types';

package/src/components/SdaiaLogoAnimation/BGSVG.tsx

@@ -0,0 +1,216 @@
+import type { CSSProperties } from 'react';
+
+const centerWrapperStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'visible',
+};
+
+const STROKE_WIDTH = 1.36675;
+
+const VB_W = 812;
+const VB_H = 873;
+
+/**
+ * Nëse dy shtigje (të sortuara sipas minX) ndahen me më pak se këtë diferencë në px,
+ * konsiderohen "një bandë" / të ngjitur në qendër — e njëjta ngjyrë + i njëjti gradient.
+ */
+const MIN_X_CLUSTER_PX = 42;
+
+const LOGO_PATH_STROKE_COLORS = [
+  '#33CC99',
+  '#6258A6',
+  '#FF6633',
+  '#273470',
+  '#6258A6',
+  '#FDBD4D',
+  '#6258A6',
+  '#FDBD4D',
+  '#6258A6',
+  '#33CC99',
+  '#6258A6',
+  '#33CC99',
+  '#FF6633',
+  '#33CC99',
+  '#6258A6'
+] as const;
+
+function darkenedStop(hex: string): string {
+  const h = hex.replace('#', '');
+  const n = parseInt(h, 16);
+  const r = (n >> 16) & 0xff;
+  const g = (n >> 8) & 0xff;
+  const b = n & 0xff;
+  const t = 0.38;
+  return `#${[r, g, b]
+    .map((c) => Math.round(c * t).toString(16).padStart(2, '0'))
+    .join('')}`;
+}
+
+function linearGradientId(slot: number): string {
+  return `sdaia-logo-lin-${slot}`;
+}
+
+const LOGO_PATHS: string[] = [
+  'M800.762 321.513L725.769 278.333L800.762 235.131V321.513Z',
+  'M796.877 635.83L721.895 592.65L796.877 549.47V635.83Z',
+  'M762.348 518.684L687.367 561.886V475.504L762.348 518.684Z',
+  'M811.166 483.298L736.183 440.118L811.166 396.916V483.298Z',
+  'M634.635 723.592L559.654 680.412L634.635 637.21V723.592Z',
+  'M647.456 576.621L546.782 518.661L647.456 460.656V576.621Z',
+  'M646.779 592.65L546.107 650.654V534.689L646.779 592.65Z',
+  'M646.747 444.728L546.097 502.687V386.768L646.747 444.728Z',
+  'M654.687 786.747L579.718 829.949V743.567L654.687 786.747Z',
+  'M531.866 517.523L405.553 444.728L531.866 371.943V517.523Z',
+  'M518.357 683.354L417.707 741.313V625.395L518.357 683.354Z',
+  'M505.523 828.333L430.554 871.513V785.131L505.523 828.333Z',
+  'M783.888 691.165L708.908 734.367V647.985L783.888 691.165Z',
+  'M762.348 370.805L687.367 414.007V327.625L762.348 370.805Z',
+  'M647.456 428.765L546.782 370.761L647.456 312.8V428.765Z',
+  'M506.241 791.214L431.258 748.012L506.241 704.833V791.214Z',
+  'M519.033 667.392L418.39 609.432L519.033 551.428V667.392Z',
+  'M531.179 518.718L404.869 591.468V445.922L531.179 518.718Z',
+  'M776.182 190.549L701.202 233.729V147.37L776.182 190.549Z',
+  'M649.998 61.0879L574.996 104.29V17.9072L649.998 61.0879Z',
+  'M646.792 296.817L546.097 354.777V238.835L646.792 296.817Z',
+  'M506.22 161.552L431.239 118.373L506.22 75.1707V161.552Z',
+  'M519.044 338.039L418.391 280.079L519.044 222.085V338.039Z',
+  'M403.503 443.557L277.169 370.795L403.503 298.011V443.557Z',
+  'M390.675 264.083L290.022 206.124L390.675 148.12V264.083Z',
+  'M377.812 87.5635L302.82 44.3838L377.812 1.18164V87.5635Z',
+  'M262.288 354.788L161.635 296.784L262.288 238.834V354.788Z',
+  'M220.919 155.13L145.937 111.95L220.919 68.748V155.13Z',
+  'M634.59 252.247L559.586 209.045L634.59 165.843V252.247Z',
+  'M505.535 44.3838L430.554 87.5635V1.18164L505.535 44.3838Z',
+  'M518.357 206.058L417.707 264.018V148.143L518.357 206.058Z',
+  'M531.18 370.796L404.869 443.58V298.033L531.18 370.796Z',
+  'M377.156 143.368L302.154 186.57V100.188L377.156 143.368Z',
+  'M389.978 280.079L289.327 338.039V222.085L389.978 280.079Z',
+  'M248.714 209.044L173.723 252.224V165.865L248.714 209.044Z',
+  'M84.056 274.466L9.06378 231.287L84.056 188.084V274.466Z',
+  'M377.823 871.526L302.82 828.345L377.823 785.143V871.526Z',
+  'M403.503 591.469L277.169 518.673L403.503 445.922V591.469Z',
+  'M249.401 834.536L174.408 791.345L249.401 748.154V834.536Z',
+  'M261.602 518.717L160.951 576.677V460.713L261.602 518.717Z',
+  'M261.602 370.806L160.951 428.81V312.801L261.602 370.806Z',
+  'M107.156 752.146L32.1533 708.966L107.156 665.785V752.146Z',
+  'M121.008 410.898L46.0047 367.718L121.008 324.516V410.898Z',
+  'M75.6855 448.577L0.683594 491.758V405.396L75.6855 448.577Z',
+  'M390.641 741.359L289.967 683.399L390.641 625.395V741.359Z',
+  'M402.817 444.739L276.485 517.489V371.943L402.817 444.739Z',
+  'M377.126 754.378L302.124 797.581V711.198L377.126 754.378Z',
+  'M389.934 609.399L289.295 667.404V551.374L389.934 609.399Z',
+  'M248.703 680.411L173.723 723.591V637.231L248.703 680.411Z',
+  'M262.288 650.61L161.636 592.65L262.288 534.68V650.61Z',
+  'M262.288 502.656L161.635 444.728L262.288 386.724V502.656Z',
+  'M120.994 561.886L45.9902 518.685L120.994 475.503V561.886Z',
+  'M78.7615 296.839L3.78101 340.019V253.637L78.7615 296.839Z',
+  'M83.374 598.042L8.37012 641.223V554.807L83.374 598.042Z',
+];
+
+function pathMinX(d: string): number {
+  let currentX = 0;
+  let minX = Infinity;
+  const segmentPattern = /([MLV])([^MLVZ]*)/g;
+  let match: RegExpExecArray | null;
+  while ((match = segmentPattern.exec(d)) !== null) {
+    const op = match[1];
+    const rest = match[2].trim();
+    if (op === 'M' || op === 'L') {
+      const values = rest.split(/[\s,]+/).map(Number).filter((n) => !Number.isNaN(n));
+      for (let i = 0; i < values.length; i += 2) {
+        if (i + 1 < values.length) {
+          currentX = values[i] ?? 0;
+          minX = Math.min(minX, currentX);
+        }
+      }
+    } else if (op === 'V') {
+      const y = parseFloat(rest);
+      if (!Number.isNaN(y)) {
+        minX = Math.min(minX, currentX);
+      }
+    }
+  }
+  return minX;
+}
+
+/**
+ * Shtigjet me minX të njëpasnjëshme (të sortuara) me diferencë ≤ MIN_X_CLUSTER_PX
+ * ndajnë të njëjtin "group" → i njëjti `colorSlot` (0–11) cikël majtas-djathtas.
+ */
+function buildPathIndexToColorSlot(): number[] {
+  const items = LOGO_PATHS.map((d, pathIndex) => ({ pathIndex, x: pathMinX(d) }));
+  items.sort((a, b) => a.x - b.x || a.pathIndex - b.pathIndex);
+  const pathIndexToSlot: number[] = new Array(LOGO_PATHS.length);
+  let groupId = 0;
+  if (items.length > 0) {
+    pathIndexToSlot[items[0]!.pathIndex] = 0;
+  }
+  for (let k = 1; k < items.length; k++) {
+    const step = items[k]!.x - items[k - 1]!.x;
+    if (step > MIN_X_CLUSTER_PX) {
+      groupId += 1;
+    }
+    pathIndexToSlot[items[k]!.pathIndex] = groupId % 12;
+  }
+  return pathIndexToSlot;
+}
+
+const pathIndexToColorSlot: number[] = buildPathIndexToColorSlot();
+
+function LogoStrokeLinearGradients() {
+  return (
+    <defs>
+      {LOGO_PATH_STROKE_COLORS.map((fromColor, index) => (
+        <linearGradient
+          key={linearGradientId(index)}
+          id={linearGradientId(index)}
+          gradientUnits="userSpaceOnUse"
+          x1={0}
+          y1={0}
+          x2={VB_W}
+          y2={VB_H}
+        >
+          <stop offset="0%" stopColor={fromColor} />
+          <stop offset="100%" stopColor={darkenedStop(fromColor)} />
+        </linearGradient>
+      ))}
+    </defs>
+  );
+}
+
+const BGSVG = () => {
+  return (
+    <div style={centerWrapperStyle}>
+      <svg
+        width={812}
+        height={873}
+        viewBox="0 0 812 873"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="block shrink-0"
+      >
+        <LogoStrokeLinearGradients />
+        {LOGO_PATHS.map((pathData, pathIndex) => {
+          const colorSlot = pathIndexToColorSlot[pathIndex] ?? 0;
+          return (
+            <path
+              key={pathIndex}
+              d={pathData}
+              fill="none"
+              stroke={`url(#${linearGradientId(colorSlot)})`}
+              strokeWidth={STROKE_WIDTH}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          );
+        })}
+      </svg>
+    </div>
+  );
+};
+
+export default BGSVG;

package/src/components/SdaiaLogoAnimation/SdaiaLogoAnimation.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  type MutableRefObject,
+  type PointerEvent,
+  type Ref,
+} from 'react';
+import { cn } from '../../lib/cn';
+import BGSVG from './BGSVG';
+import { buildSpotlightMask, MASK_FULLY_HIDDEN } from './SdaiaLogoAnimation.variants';
+import type { SdaiaLogoAnimationProps } from './SdaiaLogoAnimation.types';
+
+function toCssLength(value: string | number | undefined, fallback: string): string {
+  if (value === undefined) return fallback;
+  if (typeof value === 'number') return `${value}px`;
+  return value.trim() === '' ? fallback : value;
+}
+
+const DEFAULT_WIDTH = '70%';
+const DEFAULT_HEIGHT = '200px';
+
+function setForwardedRef(
+  ref: Ref<HTMLDivElement>,
+  node: HTMLDivElement | null,
+) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (ref) {
+    (ref as MutableRefObject<HTMLDivElement | null>).current = node;
+  }
+}
+
+/**
+ * SDAIA logo with pointer-driven spotlight mask reveal
+ * (moved from app testing; same mask / pointer logic as BGAnimationLogo).
+ */
+export const SdaiaLogoAnimation = forwardRef<HTMLDivElement, SdaiaLogoAnimationProps>(
+  function SdaiaLogoAnimation(
+    { width: widthProp, height: heightProp, className, style, dir, ...rest },
+    ref,
+  ) {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const spotlightRef = useRef<HTMLDivElement | null>(null);
+
+    const setContainerRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        containerRef.current = node;
+        setForwardedRef(ref, node);
+      },
+      [ref],
+    );
+
+    const applyMaskFromClientPoint = useCallback((clientX: number, clientY: number) => {
+      const container = containerRef.current;
+      const spotlight = spotlightRef.current;
+      if (!container || !spotlight) return;
+      const rect = container.getBoundingClientRect();
+      const localX = clientX - rect.left;
+      const localY = clientY - rect.top;
+      const mask = buildSpotlightMask(localX, localY);
+      spotlight.style.maskImage = mask;
+      spotlight.style.webkitMaskImage = mask;
+    }, []);
+
+    const hideSvgFully = useCallback(() => {
+      const spotlight = spotlightRef.current;
+      if (!spotlight) return;
+      spotlight.style.maskImage = MASK_FULLY_HIDDEN;
+      spotlight.style.webkitMaskImage = MASK_FULLY_HIDDEN;
+    }, []);
+
+    const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+      applyMaskFromClientPoint(event.clientX, event.clientY);
+    };
+
+    const handlePointerEnter = (event: PointerEvent<HTMLDivElement>) => {
+      applyMaskFromClientPoint(event.clientX, event.clientY);
+    };
+
+    const handlePointerLeave = () => {
+      hideSvgFully();
+    };
+
+    return (
+      <div
+        ref={setContainerRef}
+        dir={dir}
+        data-slot="sdaia-logo-animation"
+        {...rest}
+        className={cn('select-none', className)}
+        style={{
+          position: 'relative',
+          overflow: 'hidden',
+          ...style,
+          width: toCssLength(widthProp, DEFAULT_WIDTH),
+          height: toCssLength(heightProp, DEFAULT_HEIGHT),
+        }}
+        onPointerMove={handlePointerMove}
+        onPointerEnter={handlePointerEnter}
+        onPointerLeave={handlePointerLeave}
+      >
+        <div
+          ref={spotlightRef}
+          data-slot="sdaia-logo-animation-spotlight"
+          style={{
+            position: 'absolute',
+            inset: 0,
+            maskImage: MASK_FULLY_HIDDEN,
+            WebkitMaskImage: MASK_FULLY_HIDDEN,
+          }}
+        >
+          <BGSVG />
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/SdaiaLogoAnimation/SdaiaLogoAnimation.types.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+export interface SdaiaLogoAnimationProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children' | 'width' | 'height'
+> {
+  /** Optional text direction for the wrapper. */
+  dir?: 'ltr' | 'rtl';
+  /** Number → px. String → any CSS length (`"70%"`, `"12rem"`, …). */
+  width?: string | number;
+  /** Number → px. String → `%`, `px`, `vh`, etc. */
+  height?: string | number;
+}

package/src/components/SdaiaLogoAnimation/SdaiaLogoAnimation.variants.ts

@@ -0,0 +1,22 @@
+/**
+ * Soft spotlight: ellipse + multi-stop falloff for the mask reveal
+ * (same behavior as the original testing BGAnimationLogo).
+ */
+export const SPOTLIGHT_RADIUS_X_PX = 118;
+export const SPOTLIGHT_RADIUS_Y_PX = 92;
+
+export const MASK_FULLY_HIDDEN = 'linear-gradient(transparent 0%, transparent 100%)';
+
+export function buildSpotlightMask(localX: number, localY: number): string {
+  return [
+    'radial-gradient(',
+    `ellipse ${SPOTLIGHT_RADIUS_X_PX}px ${SPOTLIGHT_RADIUS_Y_PX}px at ${localX}px ${localY}px,`,
+    'rgba(0,0,0,1) 0%,',
+    'rgba(0,0,0,0.92) 18%,',
+    'rgba(0,0,0,0.55) 42%,',
+    'rgba(0,0,0,0.22) 65%,',
+    'rgba(0,0,0,0.06) 82%,',
+    'transparent 100%',
+    ')',
+  ].join(' ');
+}

package/src/components/SdaiaLogoAnimation/index.ts

@@ -0,0 +1,2 @@
+export { SdaiaLogoAnimation } from './SdaiaLogoAnimation';
+export type { SdaiaLogoAnimationProps } from './SdaiaLogoAnimation.types';

package/src/components/SdaiaTouch2dAnimation/SdaiaTouch2dAnimation.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Star } from './Star';
+import { STAR_LAYOUT } from './SdaiaTouch2dAnimation.variants';
+import type { SdaiaTouch2dAnimationProps } from './SdaiaTouch2dAnimation.types';
+
+/**
+ * SDAIA Touch 2D animation — a scattered field of tapered "stars" at
+ * varying sizes. Each star is independently hover-driven: the body grows
+ * upward from the bottom point on hover, then collapses back on leave.
+ */
+export const SdaiaTouch2dAnimation = forwardRef<HTMLDivElement, SdaiaTouch2dAnimationProps>(
+  function SdaiaTouch2dAnimation(
+    {
+      className,
+      dir,
+      collapsedScale = 0,
+      growMs = 900,
+      shrinkMs = 600,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="sdaia-touch-2d-animation"
+        className={cn('relative h-full w-full', className)}
+        {...rest}
+      >
+        {STAR_LAYOUT.map((star) => (
+          <div
+            key={star.id}
+            className="absolute"
+            style={{
+              left: star.left,
+              top: star.top,
+              width: star.width,
+              height: star.height,
+            }}
+          >
+            <Star
+              collapsedScale={collapsedScale}
+              growMs={growMs}
+              shrinkMs={shrinkMs}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  },
+);

package/src/components/SdaiaTouch2dAnimation/SdaiaTouch2dAnimation.types.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'react';
+
+export interface SdaiaTouch2dAnimationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Optional text direction for the wrapper. */
+  dir?: 'ltr' | 'rtl';
+  /** Visual scale of each star at rest. 0 = fully collapsed (default). */
+  collapsedScale?: number;
+  /** Time (ms) each star takes to grow on hover. Default 900. */
+  growMs?: number;
+  /** Time (ms) each star takes to shrink on mouse leave. Default 600. */
+  shrinkMs?: number;
+}

package/src/components/SdaiaTouch2dAnimation/SdaiaTouch2dAnimation.variants.ts

@@ -0,0 +1,28 @@
+/**
+ * Star layout for the SDAIA Touch 2D animation.
+ *
+ * Positions and sizes are expressed in percentages so the field scales
+ * with its container. The composition matches Figma node 1941:61005:
+ * 7 tapered "stars" of varying scale, scattered with intentional overlap.
+ *
+ * Each star anchors at the TOP (its V-notch tip), so `top` is the
+ * vertical position of the V-tip and `height` is how far the body
+ * extends downward (clipped by the container's overflow).
+ */
+export interface StarLayoutItem {
+  id: string;
+  left: string;
+  top: string;
+  width: string;
+  height: string;
+}
+
+export const STAR_LAYOUT: readonly StarLayoutItem[] = [
+  { id: 'star-1', left: '7.7%',  top: '34.5%', width: '16.9%', height: '13.7%' },
+  { id: 'star-2', left: '35.2%', top: '29.2%', width: '30%',   height: '24.4%' },
+  { id: 'star-3', left: '16.1%', top: '16.9%', width: '37%',   height: '30%'   },
+  { id: 'star-4', left: '34.4%', top: '41.4%', width: '60.2%', height: '48.8%' },
+  { id: 'star-5', left: '71.6%', top: '69.1%', width: '30%',   height: '24.4%' },
+  { id: 'star-6', left: '28.2%', top: '52.1%', width: '22%',   height: '17.8%' },
+  { id: 'star-7', left: '83.6%', top: '56.3%', width: '16.9%', height: '13.7%' },
+] as const;