BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/threecn/pitch-momentum

PitchMomentum

threecn/pitch-momentum
FreeComponent

A soccer pitch of dots where two rival particle mountains surge and clash as momentum swings, crests whitening where the fronts collide.

Install it

npx shadcn@latest add https://threecn.dev/r/pitch-momentum.json

Source

components/threecn/pitch-momentum.tsxthreecn.dev/r/pitch-momentum.json · first 6 KB
1"use client"
2
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import * as THREE from "three"
6
7import {
8 SceneContainer,
9 type SceneContainerProps,
10} from "@/components/threecn/scene-container"
11import {
12 useShadcnTheme,
13 type ThemeMode,
14} from "@/components/hooks/use-shadcn-theme"
15
16/** Rounded platform the pitch sits on. */
17const SLAB_W = 7.8
18const SLAB_H = 5.2
19const SLAB_R = 0.55
20const SLAB_DEPTH = 0.16
21
22/** Playing field (105m × 68m scaled down), markings derive from FIFA metrics. */
23const PITCH_W = 6.8
24const PITCH_H = PITCH_W * (68 / 105)
25const M = PITCH_W / 105 // meters → scene units
26const PEN_DEPTH = 16.5 * M
27const PEN_WIDTH = 40.32 * M
28const GOAL_AREA_DEPTH = 5.5 * M
29const GOAL_AREA_WIDTH = 18.32 * M
30const SPOT_DIST = 11 * M
31const CIRCLE_R = 9.15 * M
32const GOAL_W = 7.32 * M
33const GOAL_H = 2.44 * M
34const GOAL_D = 0.18
35
36/** How far mountains spread and how strongly detail noise crags them. */
37const SIGMA = 1.6
38const INV_2S2 = 1 / (2 * SIGMA * SIGMA)
39/** Squashes the across-pitch axis so mountains stretch over the full width. */
40const Z_WEIGHT = 0.45
41
42const LINE_Y = 0.012
43
44function hash2(ix: number, iz: number) {
45 const s = Math.sin(ix * 127.1 + iz * 311.7) * 43758.5453
46 return s - Math.floor(s)
47}
48
49/** Bilinear value noise in [0, 1]. */
50function vnoise(x: number, z: number) {
51 const ix = Math.floor(x)
52 const iz = Math.floor(z)
53 const fx = x - ix
54 const fz = z - iz
55 const ux = fx * fx * (3 - 2 * fx)
56 const uz = fz * fz * (3 - 2 * fz)
57 const a = hash2(ix, iz)
58 const b = hash2(ix + 1, iz)
59 const c = hash2(ix, iz + 1)
60 const d = hash2(ix + 1, iz + 1)
61 return a + (b - a) * ux + (c - a) * uz + (a - b - c + d) * ux * uz
62}
63
64/** Ridged fractal noise — sharp crests, craggy slopes. */
65function ridgedFbm(x: number, z: number) {
66 let sum = 0
67 let amp = 0.5
68 let freq = 1
69 let px = x
70 let pz = z
71 for (let o = 0; o < 4; o++) {
72 const n = 1 - Math.abs(2 * vnoise(px * freq, pz * freq) - 1)
73 sum += n * n * amp
74 amp *= 0.5
75 freq *= 2.1
76 // Rotate each octave so the lattice never lines up into visible bands.
77 const rx = px * 0.7648 - pz * 0.6442
78 pz = px * 0.6442 + pz * 0.7648 + 13.7
79 px = rx + 7.3
80 }
81 return sum // ≈ [0, 1]
82}
83
84function insideSlab(x: number, z: number) {
85 const dx = Math.abs(x) - (SLAB_W / 2 - SLAB_R)
86 const dz = Math.abs(z) - (SLAB_H / 2 - SLAB_R)
87 if (dx <= 0 || dz <= 0) {
88 return Math.abs(x) <= SLAB_W / 2 && Math.abs(z) <= SLAB_H / 2
89 }
90// … truncated

What it pulls in

npm packages

  • three
  • @react-three/fiber
  • @react-three/drei

Files it writes

  • components/threecn/pitch-momentum.tsx
  • components/threecn/scene-container.tsx
  • components/hooks/use-shadcn-theme.ts

Facts

Registry
threecn
Type
registry:ui
Access
Free
Files written
3
Licence
MIT
In the index
at or before 2026-08-13
Last confirmed
today

Go to the source

threecn.dev ln-dev7/threecn on GitHub Raw registry item This item as JSON

More from threecn

All 28 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
AuroraRibbonsaurora-ribbonsthreecnComponentsFree3 deps · 3 files
BoidsboidsthreecnComponentsFree3 deps · 3 files
ClothcloththreecnComponentsFree3 deps · 3 files
CrystalcrystalthreecnComponentsFree3 deps · 3 files
CubeWavecube-wavethreecnComponentsFree3 deps · 3 files
CurlFlowcurl-flowthreecnComponentsFree3 deps · 3 files
DnaHelixdna-helixthreecnComponentsFree3 deps · 3 files
FloatingCard3Dfloating-card-3dthreecnComponentsFree3 deps · 3 files

Also from Kynth Studios

Built for the same person as BlockDex

SkillWorks

Claude Code skills and plugins, scored

skillworks.kynth.studio

RuleStack

AGENTS.md gallery and agent-config comparison

rulestack.kynth.studio

ToolDrift

What the AI coding tools changed last night

tooldrift.kynth.studio

The studio list

One product, taken apart, once a month

Kynth Studios pulls one shipped product open every month — what it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did. One email a month, nothing in between.

Double opt-in — we send one confirmation link and nothing else until you click it.

BlockDex

Built by

Kynth Studios

the studio behind SkillWorks, RuleStack and ToolDrift

part of Toolproof, the measurement layer for AI agent tooling

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

© 2026 BlockDex. A Kynth Studios product. Changelog

BlockDex

The studio list

One product, taken apart, once a month

Kynth Studios pulls one shipped product open every month — what it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did. One email a month, nothing in between.

Double opt-in — we send one confirmation link and nothing else until you click it.

BlockDex

Built by

Kynth Studios

the studio behind SkillWorks, RuleStack and ToolDrift

part of Toolproof, the measurement layer for AI agent tooling

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

© 2026 BlockDex. A Kynth Studios product. Changelog

BlockDex

The studio list

One product, taken apart, once a month

Kynth Studios pulls one shipped product open every month — what it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did. One email a month, nothing in between.

Double opt-in — we send one confirmation link and nothing else until you click it.

BlockDex

Built by

Kynth Studios

the studio behind SkillWorks, RuleStack and ToolDrift

part of Toolproof, the measurement layer for AI agent tooling

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

© 2026 BlockDex. A Kynth Studios product. Changelog

BlockDex