BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/@cellforge/cell-lattice-4

Vertex Relay

cellforge/cell-lattice-4
FreeComponent

A bright signal hands off around the hex vertices while inner echo dots answer each corner and the center keeps a quick pulse.

Install it

npx shadcn@latest add https://cellforge.dev/r/cell-lattice-4.json

Source

components/ui/cell-lattice-4.tsxcellforge.dev/r/cell-lattice-4.json · first 6 KB
1"use client";
2
3import type { CSSProperties } from "react";
4
5import { cx } from "@/components/ui/cellforge-core";
6import { resolveDmxColorTokens } from "@/components/ui/cellforge-core";
7import { styleOpacity, stylePx } from "@/components/ui/cellforge-core";
8import { remapOpacityToTriplet } from "@/components/ui/cellforge-core";
9import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/cellforge-core";
10import { getPatternIndexes } from "@/components/ui/cellforge-core";
11import { useCellForgePhases } from "@/components/ui/cellforge-hooks";
12import { useCyclePhase } from "@/components/ui/cellforge-hooks";
13import { usePrefersReducedMotion } from "@/components/ui/cellforge-hooks";
14import type { CellForgeCommonProps } from "@/components/ui/cellforge-core";
15
16export type CellLattice4Props = CellForgeCommonProps;
17
18const ROW_COUNTS = [3, 4, 5, 4, 3] as const;
19const BASE_OPACITY = 0.08;
20const MID_OPACITY = 0.36;
21const HIGH_OPACITY = 0.98;
22const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;
23
24function hexPatternIndex(row: number, rowCount: number, col: number): number {
25 return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;
26}
27const TRAIL_SPAN = 2.2;
28
29const VERTEX_PATH = [
30 "0,2",
31 "1,3",
32 "2,4",
33 "3,3",
34 "4,2",
35 "3,0",
36 "2,0",
37 "1,0",
38 "0,0"
39] as const;
40
41const ECHO_BY_VERTEX: Readonly<Record<(typeof VERTEX_PATH)[number], readonly string[]>> = {
42 "0,2": ["0,1", "1,2"],
43 "1,3": ["1,2", "2,3"],
44 "2,4": ["2,3", "2,2"],
45 "3,3": ["3,2", "2,3"],
46 "4,2": ["4,1", "3,2"],
47 "3,0": ["3,1", "2,1"],
48 "2,0": ["2,1", "2,2"],
49 "1,0": ["1,1", "2,1"],
50 "0,0": ["0,1", "1,1"]
51};
52
53const PATH_LEN = VERTEX_PATH.length;
54
55function clamp01(n: number | undefined) {
56 if (n == null || !Number.isFinite(n)) {
57 return;
58 }
59 return Math.min(1, Math.max(0, n));
60}
61
62function pointForCell(row: number, col: number): { x: number; y: number } {
63 const count = ROW_COUNTS[row] ?? 1;
64 return {
65 x: col - (count - 1) / 2,
66 y: (row - 2) * HEX_ROW_PITCH_RATIO
67 };
68}
69
70function modF(n: number, m: number): number {
71 return ((n % m) + m) % m;
72}
73
74function opacityForCell(row: number, col: number, phase: number): number {
75 const id = `${row},${col}`;
76 const head = phase * PATH_LEN;
77 const vertexIndex = VERTEX_PATH.indexOf(id as (typeof VERTEX_PATH)[number]);
78 let opacity = BASE_OPACITY;
79
80 if (vertexIndex >= 0) {
81 const distance = modF(head - vertexIndex, PATH_LEN);
82 const glow = Math.max(0, 1 - distance / TRAIL_SPAN);
83// … truncated

Facts

Registry
@cellforge
Type
registry:ui
Access
Free
Files written
0
Licence
MIT
First indexed
2026-08-04
Last confirmed
today

Go to the source

cellforge.dev cellforge-dev/cellforge on GitHub Raw registry item This item as JSON

More from @cellforge

All 71 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
All CellForge Loadersall@cellforgeComponentsFreeno deps
Core Spokescell-angle-1@cellforgeComponentsFreeno deps
Column Rakecell-angle-10@cellforgeComponentsFreeno deps
Shelf Descentcell-angle-11@cellforgeComponentsFreeno deps
Skew Driftcell-angle-12@cellforgeComponentsFreeno deps
Serpent Zipcell-angle-13@cellforgeComponentsFreeno deps
Pillar Sweepcell-angle-14@cellforgeComponentsFreeno deps
Tripod Handoffcell-angle-15@cellforgeComponentsFreeno deps
BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex