docs: Homepage added

docs/docs/main.mdx

@@ -0,0 +1,14 @@
+import { Homepage } from '#components/homepage/homepage.tsx';
+
+export const meta = {
+  title: 'Main',
+  category: '',
+  menuPriority: 10000,
+  menuHidden: true,
+  parameters: {
+    layout: 'fullscreen',
+    asideEnabled: false,
+  },
+};
+
+<Homepage />

docs/package.json

@@ -22,9 +22,10 @@
     "typescript": "^5.9.2"
   },
   "dependencies": {
-    "@krutoo/showcase": "^0.6.1",
+    "@krutoo/showcase": "^0.7.1",
     "@mdx-js/react": "^3.1.0",
     "classnames": "^2.5.1",
+    "lucide-react": "^1.17.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "shiki": "^3.9.2"

docs/src/components/homepage/demo-dots.ts

@@ -0,0 +1,72 @@
+import { Point2d, Vector2, clamp, lerp } from '@krutoo/utils';
+import { Demo, DemoContext, DemoInitContext, DemoRenderContext } from './types.ts';
+import { easeInQuad } from './utils.ts';
+
+interface Thing extends Point2d {
+  readonly radius: number;
+}
+
+export class DemoDots implements Demo {
+  dots: Vector2[];
+  thing: Thing;
+
+  constructor({ canvas }: DemoInitContext) {
+    this.dots = [];
+    this.thing = {
+      x: canvas.width / 2,
+      y: canvas.height / 2,
+      get radius() {
+        return Math.min(canvas.width, canvas.height) / 2;
+      },
+    };
+
+    const radius = clamp(Math.min(canvas.width, canvas.height) / 48, 12, 64);
+    const hexWidth = Math.sqrt(3) * radius;
+    const hexHeight = 2 * radius;
+    const xSpacing = hexWidth;
+    const ySpacing = (3 / 4) * hexHeight;
+    const columns = canvas.width / xSpacing;
+    const rows = canvas.height / ySpacing + 1;
+
+    for (let r = 0; r < rows; r++) {
+      const xOffset = r % 2 === 0 ? 0 : xSpacing / 2;
+
+      for (let c = 0; c < columns; c++) {
+        const x = c * xSpacing + xOffset;
+        const y = r * ySpacing;
+
+        this.dots.push(Vector2.of(x, y));
+      }
+    }
+  }
+
+  update({ mouse }: DemoContext) {
+    const { thing } = this;
+
+    thing.x = lerp(thing.x, mouse.x, 0.08);
+    thing.y = lerp(thing.y, mouse.y, 0.08);
+  }
+
+  render({ context, colorScheme }: DemoRenderContext) {
+    const { dots, thing } = this;
+
+    context.fillStyle = colorScheme === 'dark' ? '#ffffffaa' : '#3c3c43aa';
+    context.beginPath();
+
+    for (let i = 0; i < dots.length; i++) {
+      const dot = dots[i]!;
+      const distance = dot.getDistance(thing);
+
+      if (distance > thing.radius) {
+        continue;
+      }
+
+      const dotRadius = lerp(0, 3, easeInQuad(1 - distance / thing.radius));
+
+      context.moveTo(dot.x + dotRadius, dot.y);
+      context.arc(dot.x, dot.y, dotRadius, 0, 2 * Math.PI);
+    }
+
+    context.fill();
+  }
+}

docs/src/components/homepage/homepage.m.css

@@ -0,0 +1,115 @@
+.root {
+  height: calc(100vh - var(--showcase-ui-header-height, 64px));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 24px;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 400px;
+  max-width: 100%;
+  z-index: 1;
+}
+
+.canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+}
+
+.field {
+  overflow: hidden;
+  background: var(--showcase-ui-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 12px;
+  font-size: 20px;
+  height: 48px;
+  border-radius: 99999px;
+  color: var(--showcase-ui-main-color);
+  box-shadow: inset 0 0 0 2px var(--showcase-ui-main-color);
+}
+
+.field ::selection {
+  color: var(--showcase-ui-background);
+  background: var(--showcase-ui-color);
+}
+
+.fieldContent {
+  white-space: nowrap;
+  padding-left: 32px;
+  text-align: center;
+  flex-grow: 1;
+  line-height: 1;
+  font-family:
+    Menlo,
+    Consolas,
+    Monaco,
+    Adwaita Mono,
+    Liberation Mono,
+    Lucida Console,
+    monospace;
+}
+
+.fieldButton {
+  all: unset;
+  display: block;
+  background: transparent;
+  user-select: none;
+  color: var(--showcase-ui-link-color);
+}
+
+.fieldButton:hover {
+  background: transparent;
+  color: var(--showcase-ui-link-hover-color);
+}
+
+.fieldButton:disabled {
+  background: transparent;
+  color: var(--showcase-ui-link-color);
+}
+
+.fieldButton > svg {
+  display: block;
+}
+
+.links {
+  display: flex;
+  gap: 8px;
+}
+
+a.link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 20px;
+  padding: 0 20px;
+  width: 0;
+  flex-grow: 1;
+  height: 56px;
+  border-radius: 16px;
+  font-weight: 700;
+  background: var(--showcase-ui-main-color);
+  color: var(--showcase-ui-background) !important;
+  text-decoration: none !important;
+}
+
+a.link.secondary {
+  color: var(--showcase-ui-main-color) !important;
+  background: var(--showcase-ui-background);
+  box-shadow: inset 0 0 0 2px var(--showcase-ui-main-color);
+}