hub / github.com/cjimmy/grainy-gradients

github.com/cjimmy/grainy-gradients @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

41 symbols 123 edges 26 files 1 documented · 2% ● updated 3mo ago★ 170

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

Grainy Gradient playground

Built for CSS-Tricks article Grainy Gradients
View at grainy-gradients.vercel.app

Explore the parameters to make a basic grainy gradient.

diagram

Code

Next.js app, with Ant Design components, zustand for state, and help from highlight.js and react-color.

# install dependencies
npm i

# run locally
npm run dev

# lint
npm run lint

# build locally
npm run build

Most of the important code is under src/components/CodeBlocks

Extension points exported contracts — how you extend this code

IHeadContent (Interface)

(no doc)

src/components/HeadContent.tsx

ICopyToClipboard (Interface)

(no doc)

src/components/CopyToClipboard.tsx

ILinkOut (Interface)

(no doc)

src/components/LinkOut.tsx

ICol (Interface)

(no doc)

src/components/layout/index.tsx

IGradientRow (Interface)

(no doc)

src/components/GradientControls/GradientRow.tsx

Core symbols most depended-on inside this repo

getRandomFrom

called by 8

src/components/store.tsx

updateProp

called by 7

src/components/GradientControls/GradientRow.tsx

rgbToString

called by 7

src/components/CodeBlocks/Output.tsx

makeError

called by 3

src/components/CopyToClipboard.tsx

getGradientFirstParam

called by 3

src/components/CodeBlocks/Css.tsx

copyUrlToClipboard

called by 1

src/components/CopyToClipboard.tsx

copyClipboardApi

called by 1

src/components/CopyToClipboard.tsx

copyExecCommand

called by 1

src/components/CopyToClipboard.tsx

Shape

Function 30

Interface 8

Class 2

Method 1

Languages

TypeScript100%

Modules by API surface

src/components/CopyToClipboard.tsx7 symbols

src/pages/_document.tsx3 symbols

src/components/layout/index.tsx3 symbols

src/components/GradientControls/GradientRow.tsx3 symbols

src/components/CodeBlocks/subcomponents/SliderInput.tsx3 symbols

src/components/store.tsx2 symbols

src/components/LinkOut.tsx2 symbols

src/components/HeadContent.tsx2 symbols

src/components/GradientControls/GradientControls.tsx2 symbols

src/components/GradientControls/ColorPicker.tsx2 symbols

src/components/CodeBlocks/subcomponents/SectionTitle.tsx2 symbols

src/components/CodeBlocks/Output.tsx2 symbols

For agents

$ claude mcp add grainy-gradients \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact