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-1

Hex Orbit

cellforge/cell-lattice-1
FreeComponent

A 3-4-5-4-3 hexagonal dot field with two soft perimeter heads chasing around the shell while the center stays quietly lit.

Install it

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

Source

components/ui/cell-lattice-1.tsxcellforge.dev/r/cell-lattice-1.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 CellLattice1Props = CellForgeCommonProps;
17
18const ROW_COUNTS = [3, 4, 5, 4, 3] as const;
19const BASE_OPACITY = 0.1;
20const MID_OPACITY = 0.2;
21const HIGH_OPACITY = 0.96;
22const CENTER_OPACITY = 0.1;
23const TRAIL_SPAN = 5;
24const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;
25
26function hexPatternIndex(row: number, rowCount: number, col: number): number {
27 return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;
28}
29
30const PERIMETER_PATH = [
31 "0,0",
32 "0,1",
33 "0,2",
34 "1,3",
35 "2,4",
36 "3,3",
37 "4,2",
38 "4,1",
39 "4,0",
40 "3,0",
41 "2,0",
42 "1,0"
43] as const;
44
45const PATH_LEN = PERIMETER_PATH.length;
46const HALF_PATH = PATH_LEN / 2;
47
48function clamp01(n: number | undefined) {
49 if (n == null || !Number.isFinite(n)) {
50 return;
51 }
52 return Math.min(1, Math.max(0, n));
53}
54
55function modF(n: number, m: number): number {
56 return ((n % m) + m) % m;
57}
58
59function smoothstep01(edge0: number, edge1: number, x: number): number {
60 if (edge1 <= edge0) {
61 return x >= edge1 ? 1 : 0;
62 }
63 const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
64 return t * t * (3 - 2 * t);
65}
66
67function glowAlongPath(head: number, pathIndex: number | null): number {
68 if (pathIndex === null) {
69 return BASE_OPACITY;
70 }
71
72 const distance = modF(head - pathIndex, PATH_LEN);
73 const glow = 1 - smoothstep01(0, TRAIL_SPAN, distance);
74 return BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY);
75}
76
77function opacityForCell(id: string, phase: number): number {
78 if (id === "2,2") {
79 return CENTER_OPACITY;
80 }
81
82 const pathIndex = PERIMETER_PATH.indexOf(id as (typeof PERIMETER_PATH)[number]);
83 const normalizedPathIndex = pathIndex === -1 ? null : pathIndex;
84 const headA = phase * PATH_LEN;
85// … truncated

Facts

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

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