Developers
The StudioKing API
Every background, every brand starter set and every client stylesheet is one HTTPS request. No key, no SDK, cached at the edge, readable from any origin.
Quick start
- Pick a background in the studio and copy its recipe (the code under the preview title, like
c.circles.spotlight.navyGold).
- Put one line in your page head. CSS for static backgrounds, a script when you want live ones.
- Put the class on any full-width section.
<link rel="stylesheet" href="https://studioking.ai/api/bg/c.circles.spotlight.navyGold.css?class=hero">
<section class="hero"> ... </section>
<script src="https://studioking.ai/api/bg/l.aurora.navyGold.js?target=.hero&speed=1.2&ov=grain:40" defer></script>
<section class="hero"> ... </section>
Conventions
| Item | Value |
|---|
| Base URL | https://studioking.ai/api |
| Methods | GET (and HEAD, OPTIONS). Responses are read-only. |
| Authentication | None for the endpoints on this page. |
| CORS | Access-Control-Allow-Origin: * on every response. |
| Errors | JSON { "error": "...", "hint": "..." } with a 4xx or 5xx status. Errors are never cached. |
| Colours | Six-digit hex without #, like 1f6a4e. |
Endpoints
GET/api/bg/{recipe}.{css|json|js}
Any recipe in the library, curated or not, as a stylesheet, a JSON description, or a script that mounts it on your sections. Live recipes mount WebGL with the CSS stand-in underneath, pause offscreen, and hold still under reduced motion.
| Recipe | Shape | Example |
|---|
| Pattern | p.<pattern>.<palette>[.fine|bold|faint] | p.seigaiha.sand.bold |
| Atmosphere | a.<atmosphere>.<palette>[.intense|subtle] | a.auroraBands.emeraldGold |
| Combination | c.<pattern>.<atmosphere>.<palette> | c.damask.goldLeaf.ivoryGold |
| Live shader | l.<shader>.<palette> | l.galaxy.midnight |
| Parameter | Applies to | Meaning |
|---|
lens | all | Recolour the recipe to a brand colour, light or dark to match the recipe. |
class | .css | The class name to write, like hero. Default sk-<recipe>. |
target | .js | One selector to mount on, .class or #id. Default [data-studioking]. |
speed | live | 0 to 3. Default 1. |
intensity | live | 0.2 to 2.2. Default 1. |
scale | live | 0.4 to 2.5. Default 1. |
ov | live | Up to four CSS overlays with strength 0 to 100, like grain:50,vignette:60. |
Try it: CSS, JSON, live script. Cached for a day at the edge.
GET/api/client/{client}.{js|css|json}
One hosted stylesheet per client, built from the kits your team tagged with that client. Every kit becomes a class: .sk-<kit name> plus the permanent .sk-<kit id>. Add c and the six starter slots fill any class the team has not designed yet, so the link works on day one and never changes.
| Parameter | Meaning |
|---|
c | Brand colour for the starter slots. |
i | Industry for the starter slots: lawFinance, realEstate, medical, weddings, tech, hospitality, beauty, civic. |
team | Team library to read. Default default. |
Edits reach client sites about a minute after they sync: a 60 second edge cache with ETag revalidation. The .js also mounts sections added later by single-page apps.
<script src="https://studioking.ai/api/client/howell-shaw.js?c=1f6a4e" defer></script>
GET/api/brand/{brand}.{js|css|json}
A starter set in any brand colour, from the query alone: no account and no storage. The classes are the slot vocabulary every client link shares: .sk-hero .sk-section .sk-feature .sk-cta .sk-light .sk-footer.
| Parameter | Meaning |
|---|
c | Required. Brand colour. |
i | Optional industry (same values as above). |
n | Optional display name, plain text. |
Try it: manifest, CSS. Deterministic, cached for a day.
GET/api/health
Renders a real recipe through the engine on every call and reports each check. 200 with "status": "ok", or 503 with "degraded". Never cached. The status page reads it.
Errors
| Status | error | When |
|---|
| 400 | bad lens, bad colour | A colour that is not six hex digits. |
| 400 | bad class, bad target | A class or selector that is not a single plain identifier. |
| 400 | bad speed, bad intensity, bad scale, bad ov | A live parameter out of range, or an unknown overlay. |
| 400 | live only | Live parameters on a static recipe. |
| 400 | colour required, bad industry, bad team | Brand and client parameters. |
| 404 | not found, unknown recipe, unknown client | A path, recipe or client that does not exist. |
| 503 | degraded, kits store not bound | A dependency is missing; retry later. |
Reference
Read from the engine at build time, so these lists always match the library.
41 live shaders
| Id | Name | Family |
|---|
aurora | Aurora Silk | Flow |
liquid | Liquid Silk | Flow |
mesh | Mesh Flow | Glow |
stars | Starfield Drift | Space |
caustics | Caustic Light | Light |
smoke | Velvet Smoke | Flow |
horizon | Neon Horizon | Tech |
contours | Topo Flow | Tech |
bokeh | Rising Bokeh | Light |
ripples | Silk Ripples | Light |
plasma | Plasma Veil | Glow |
silk | Silk Folds | Luxury |
chrome | Liquid Chrome | Luxury |
guilloche | Guilloche Spin | Luxury |
decoRays | Deco Sunburst | Luxury |
marbleFlow | Flowing Marble | Luxury |
goldDust | Gold Dust | Particles |
fireflies | Fireflies | Particles |
snow | Snowfall | Particles |
bubbles | Champagne Bubbles | Particles |
warp | Light Speed | Particles |
lava | Lava Lamp | Organic |
cells | Living Cells | Organic |
clouds | Cloudscape | Organic |
ocean | Ocean Swell | Organic |
ink | Ink Bloom | Organic |
heat | Heat Haze | Organic |
stained | Stained Glass | Geometric |
moire | Moire Rings | Geometric |
kaleido | Kaleidoscope | Geometric |
hexPulse | Hex Pulse | Tech |
dotWave | Dot Matrix | Tech |
rain | Digital Rain | Tech |
network | Constellation | Tech |
circuitFlow | Circuit Flow | Tech |
scope | Signal Waves | Tech |
galaxy | Spiral Galaxy | Space |
nebulaFlow | Nebula Drift | Space |
beams | Spotlights | Light |
rays | Sun Rays | Light |
iridescent | Iridescence | Glow |
8 overlays (for ov)
| Id | Name |
|---|
grain | Film grain |
vignette | Vignette |
frame | Edge glow |
scan | Scanlines |
halftone | Halftone |
hexDots | Hex dots |
lattice | Lattice |
circuit | Circuit |
64 palettes
| Id | Name | Tone |
|---|
navyGold | Midnight Navy | dark |
blackGold | Obsidian Gold | dark |
emeraldGold | Emerald & Gold | dark |
oxbloodGold | Oxblood & Gold | dark |
purpleGold | Royal Plum | dark |
slatePlat | Slate Platinum | dark |
inkRose | Ink & Rose Gold | dark |
espresso | Espresso Gold | dark |
tealCopper | Teal & Copper | dark |
charcoal | Charcoal Bronze | dark |
midnight | Sapphire Night | dark |
forest | Forest Brass | dark |
wine | Vintage Wine | dark |
arctic | Arctic Steel | dark |
sand | Desert Onyx | dark |
noir | Pure Noir | dark |
champagne | Champagne Noir | dark |
gunmetal | Gunmetal Gold | dark |
bordeaux | Bordeaux Brass | dark |
peacock | Peacock Gold | dark |
amethyst | Amethyst Silver | dark |
cobalt | Cobalt Brass | dark |
graphite | Graphite Mist | dark |
ember | Ember Black | dark |
roseQuartz | Rose Quartz | dark |
jade | Jade & Gold | dark |
sapphire | Sapphire Royal | dark |
copperNoir | Copper Noir | dark |
lilacSilver | Lilac Silver | dark |
oliveGold | Olive Gold | dark |
neonNoir | Neon Noir | dark |
cyberViolet | Cyber Violet | dark |
deepOcean | Deep Ocean | dark |
volcanic | Volcanic | dark |
inkSilver | Ink & Silver | dark |
royalCrimson | Royal Crimson | dark |
pineCream | Pine & Cream | dark |
tobacco | Tobacco Leather | dark |
steelBrass | Steel & Brass | dark |
aubergine | Aubergine Gold | dark |
ivoryGold | Ivory & Gold | light |
pearl | Pearl White | light |
champagneCream | Champagne Cream | light |
marbleWhite | Marble White | light |
linenSand | Linen Sand | light |
blushRose | Blush Rose | light |
sageBrass | Sage & Brass | light |
powderBlue | Powder Blue | light |
lavenderMist | Lavender Mist | light |
mintPearl | Mint Pearl | light |
peachCream | Peach Cream | light |
porcelainNavy | Porcelain Navy | light |
paperInk | Paper & Ink | light |
alabasterCopper | Alabaster Copper | light |
skyPlatinum | Sky Platinum | light |
butterGold | Butter Gold | light |
seafoam | Seafoam | light |
doveGrey | Dove Grey | light |
honeyOat | Honey Oat | light |
lilacCream | Lilac Cream | light |
celadon | Celadon | light |
coralSand | Coral Sand | light |
eggshellEmerald | Eggshell Emerald | light |
frostSilver | Frost Silver | light |
95 patterns
- circles
- flowerOfLife
- seigaiha
- argyle
- diamondGrid
- eightStar
- hexagram
- hexOutline
- isoCubes
- cubesSolid
- chevron
- zigzag
- herringbone
- scallops
- waveLines
- ogee
- quatrefoil
- beveledDiamond
- greekFret
- coffered
- ripples
- linkedRings
- pinwheel
- triangles
- brick
- subwayTile
- octagonTile
- nestedSquares
- concentricDiamonds
- hexDots
- mosaic
- terrazzo
- halftone
- halftoneLines
- circuit
- moire
- spiral
- chainLinks
- arrowField
- stepped
- diamondPlate
- raysCenter
- waveField
- rosette
- octagonStar
- zellige
- latticeSquares
- basketweave
- artDecoFan
- crosshatchPlus
- damask
- arabesque
- fleurDeLis
- knotwork
- gothicArch
- trefoil
- medallion
- paisley
- starburstTile
- pinstripe
- diagonalHairline
- fineGrid
- doubleGrid
- windowpane
- dotGrid
- microDot
- polka
- harlequin
- crossWeave
- triaxial
- tartan
- gingham
- ticking
- barberBands
- candyStripe
- railway
- notebook
- isoGrid
- hairlineRows
- diamondMesh
- crossStitch
- marble
- topographic
- waterRings
- contourBlobs
- clouds
- smoke
- grainField
- leather
- linen
- canvasWeave
- woodGrain
- brushedMetal
- stoneSpeckle
- bokehDots
40 atmospheres
- spotlight
- crownGlow
- underGlow
- frameGlow
- cornerSun
- conicSheen
- sweep
- satinStreak
- lightShaft
- prismSheen
- twinBeams
- auroraMesh
- dualGlow
- meshGradient
- nebula
- sunrise
- horizon
- stageFloor
- splitGlow
- cornerGlows
- bokeh
- halo
- ringGlow
- lensFlare
- godRays
- auroraBands
- spectrumSweep
- foilBands
- scanlines
- duotone
- colorGrade
- fogWash
- noiseFog
- vignette
- innerShadow
- edgeFrame
- neonEdge
- grainOverlay
- starlight
- goldLeaf
8 industries
| Id | Name |
|---|
lawFinance | Law & Finance |
realEstate | Luxury Real Estate |
medical | Medical & Wellness |
weddings | Weddings & Events |
tech | Tech & SaaS |
hospitality | Restaurants & Hospitality |
beauty | Beauty & Fashion |
civic | Campaign & Civic |
