Prism Bloom
cellforge/cell-lattice-2FreeComponent
Three rotating spokes sweep through the hex field with a soft outer shell pulse and a breathing center point.
Install it
npx shadcn@latest add https://cellforge.dev/r/cell-lattice-2.jsonSource
1"use client";23import type { CSSProperties } from "react";45import { 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";1516export type CellLattice2Props = CellForgeCommonProps;1718const ROW_COUNTS = [3, 4, 5, 4, 3] as const;19const BASE_OPACITY = 0.08;20const MID_OPACITY = 0.44;21const HIGH_OPACITY = 0.98;22const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;2324function hexPatternIndex(row: number, rowCount: number, col: number): number {25 return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;26}27const SPOKE_WIDTH = 0.34;2829function clamp01(n: number | undefined) {30 if (n == null || !Number.isFinite(n)) {31 return;32 }33 return Math.min(1, Math.max(0, n));34}3536function angularDistance(a: number, b: number): number {37 const diff = Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b)));38 return Math.min(diff, Math.PI * 2 - diff);39}4041function pointForCell(row: number, col: number): { angle: number; radius: number } {42 const count = ROW_COUNTS[row] ?? 1;43 const x = col - (count - 1) / 2;44 const y = (row - 2) * HEX_ROW_PITCH_RATIO;45 const radius = Math.sqrt(x * x + y * y);46 return { angle: Math.atan2(y, x), radius };47}4849function opacityForCell(row: number, col: number, phase: number): number {50 const { angle, radius } = pointForCell(row, col);51 if (radius < 0.01) {52 return MID_OPACITY + Math.sin(phase * Math.PI * 2) * 0.18;53 }5455 const rotation = phase * Math.PI * 2;56 const spokeA = angularDistance(angle, rotation);57 const spokeB = angularDistance(angle, rotation + (Math.PI * 2) / 3);58 const spokeC = angularDistance(angle, rotation + (Math.PI * 4) / 3);59 const nearestSpoke = Math.min(spokeA, spokeB, spokeC);60 const spokeGlow = Math.max(0, 1 - nearestSpoke / SPOKE_WIDTH);61 const outerPulse = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2 - radius * 2.2);62// … truncated
More from @cellforge
All 71 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| All CellForge Loadersall | @cellforge | Components | Free | no deps | |
| Core Spokescell-angle-1 | @cellforge | Components | Free | no deps | |
| Column Rakecell-angle-10 | @cellforge | Components | Free | no deps | |
| Shelf Descentcell-angle-11 | @cellforge | Components | Free | no deps | |
| Skew Driftcell-angle-12 | @cellforge | Components | Free | no deps | |
| Serpent Zipcell-angle-13 | @cellforge | Components | Free | no deps | |
| Pillar Sweepcell-angle-14 | @cellforge | Components | Free | no deps | |
| Tripod Handoffcell-angle-15 | @cellforge | Components | Free | no deps |
