-
Notifications
You must be signed in to change notification settings - Fork 11
Expand file tree
/
Copy pathdev.html
More file actions
102 lines (97 loc) · 6.43 KB
/
Copy pathdev.html
File metadata and controls
102 lines (97 loc) · 6.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FLUID — DEV</title>
<meta name="description" content="Use Fluid in your code: iframe embeds, an MCP server for Claude, and a plain JSON API. Free forever, renders on the viewer's GPU.">
<meta name="theme-color" content="#d8d8d5">
<link rel="icon" type="image/png" href="assets/favicon.png">
<script src="assets/fluid-favicon.js" defer></script>
<style>
:root{--bg:#d8d8d5;--ink:#101010;--line:rgba(16,16,16,.16);--soft:rgba(16,16,16,.55)}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:var(--bg);color:var(--ink);
font-family:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
font-size:12px;letter-spacing:.10em;padding:28px 16px 64px;
}
.wrap{max-width:680px;margin:0 auto}
h1{font-size:13px;letter-spacing:.18em;font-weight:700;text-transform:uppercase}
.tag{font-size:10px;color:var(--soft);margin:6px 0 18px;letter-spacing:.14em;text-transform:uppercase}
section{border-top:1px solid var(--line);padding:16px 0 18px}
.sec-title{font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;font-weight:700}
p{font-size:11px;line-height:1.7;letter-spacing:.06em;margin-bottom:10px}
pre{
background:#06060a;color:#e8e8e4;border-radius:8px;padding:14px;
font-size:10px;line-height:1.6;letter-spacing:.02em;overflow-x:auto;margin:10px 0;
}
a{color:var(--ink)}
code{letter-spacing:.02em}
.soft{color:var(--soft)}
footer{margin-top:28px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
</style>
</head>
<body>
<div class="wrap">
<h1>Fluid — Dev</h1>
<div class="tag">Generative assets for your site — embed a live background or export a static one. Free forever, renders on the viewer's GPU, no key, no quota</div>
<section>
<div class="sec-title">00 — Embed a live background</div>
<p>Design a piece in <a href="/">the studio</a>, then in <strong>06 — Share & embed</strong> copy it
one of three ways. The iframe renders canvas-only and animates live; the hash carries every parameter, so
it is your exact piece. Free for any site, personal or commercial.</p>
<p><strong>Copy iframe</strong> — a responsive block you size yourself:</p>
<pre><iframe src="https://fluid.krackeddevs.com/#p=…,1"
style="width:100%;height:480px;border:0" loading="lazy" title="Fluid background"></iframe></pre>
<p><strong>Copy full-bleed</strong> — a fixed background behind your page (never eats clicks):</p>
<pre><div style="position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none">
<iframe src="…/#p=…,1" title="Fluid background"
style="width:100%;height:100%;border:0;display:block"></iframe>
</div></pre>
<p><strong>Copy CSS</strong> — for a <em>static</em> background: export an image in
<strong>07 — Export</strong>, host it, then drop in the snippet:</p>
<pre>body { background: url("your-fluid.jpg") center / cover fixed no-repeat; }</pre>
<p class="soft">Drop the trailing ",1" from any link to open the full studio instead.</p>
</section>
<section>
<div class="sec-title">01 — MCP (Claude)</div>
<p>Add the server once, then ask Claude for pieces in plain language —
"give my hero section a thermal fluid-chrome background, chunky pixels" — and it returns
working embed code.</p>
<p><strong>Claude Code</strong> (terminal):</p>
<pre>claude mcp add --transport http fluid \
https://fluid.krackeddevs.com/mcp</pre>
<p><strong>claude.ai</strong> (web, desktop or mobile): Settings → Connectors → Add custom
connector → paste <code>https://fluid.krackeddevs.com/mcp</code>. No key, no auth — then just ask
Claude to design you a background and it hands back the link and the code.</p>
<p>Tools: <code>create_piece</code> (params, a named look, or your 2–4 brand hex colours — returns share URL + iframe),
<code>get_embed_code</code> (share URL → copy-paste native <code><fluid-bg></code> / React / iframe snippets),
<code>list_looks</code> (all curated starting points), <code>get_seed_of_the_day</code> (the day's piece — one design per UTC day, identical for every visitor), <code>decode_link</code> (read parameters back out of any share URL to remix it).</p>
<p class="soft">Agents without MCP can read <a href="/llms.txt">/llms.txt</a> — the whole integration surface in one page.</p>
</section>
<section>
<div class="sec-title">02 — API</div>
<p>Same generator as plain JSON, no auth:</p>
<pre>curl "https://fluid.krackeddevs.com/api/piece?look=borealis"
curl "https://fluid.krackeddevs.com/api/piece?field=flow&palette=sunset&warp=4"
curl "https://fluid.krackeddevs.com/api/piece?field=cellular&palette=ocean"
curl "https://fluid.krackeddevs.com/api/looks"</pre>
<p class="soft">Params: look, field (noise / flow / cellular / gyroid / truchet / interfere / kaleido / lines / grid / golden / smoke / crystal / honeycomb / bloom / sweep / marble / plaid / curtain / stitch / pursuit / chladni / cassini / topo / eddy), screen (square / hex / ascii / dither / glitch),
palette (aurora / sunset / ocean / dusk / ember / mint / iris / chrome) or colors (2–4 hex colours dark→light —
2 or 3 blend into a full gradient, e.g. <code>colors=0a0a1a,ffe1f5</code>), finish (glass / metal / sand / liquid / molten / paint),
lens (square / invert / mobius / droste / hyperbolic / julia / cube / exp / sine / joukowski / newton / modular — math transforms of the sampling domain — plus ground, which tips the plane into perspective so the piece recedes to a horizon) with lensAmount 0–1,
seed 3–92, speed 0–3, zoom 0.5–4,
warp 0–9, grain 0–0.3, pixel 1–48, dot 4–26, threshold 0–1 for dither, halftone, aspect
(1:1 / 4:5 / 5:4 / 3:2 / 16:9 / 9:16). Omit seed for random.</p>
</section>
<section>
<div class="sec-title">03 — Rules of the road</div>
<p>Embeds are free for any site, personal or commercial. Visitors' own photos can only be
loaded inside the tool — never via URL, so nothing you embed can read anyone's data.
Everything computes client-side; there is no server to outgrow.</p>
</section>
<footer><a href="index.html">← the studio</a> <a href="gallery.html">gallery</a> <a href="manual.html">manual</a></footer>
</div>
</body>
</html>