commit e797e0e66f6c543d84128bb77fef0c587bf98616
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 16:30:39 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..544c577
--- /dev/null
+++ b/body.html
@@ -0,0 +1,16 @@
+<header>
+ <h1>Flow</h1>
+ <p>Move your cursor or touch to interact</p>
+</header>
+
+<main>
+ <canvas id="particleCanvas" aria-label="Interactive particle animation" role="img"></canvas>
+</main>
+
+<footer>
+ <p>Created with love by Flow</p>
+ <nav>
+ <a href="/about">About</a>
+ <a href="/contact">Contact</a>
+ </nav>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..2257556
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://flow.scroll.pub
+metaTags
+editButton /edit.html
+title Flow - Interactive Particle Animation
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..04a846d
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01QLhNeDHikWxhQFv9C25Yva",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a mesmerizing, interactive particle animation website that surprises visitors with beautiful flowing particles they can interact with.\n\n---domain---\nflow.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://flow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Flow - Interactive Particle Animation\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Flow</h1>\n <p>Move your cursor or touch to interact</p>\n</header>\n\n<main>\n <canvas id=\"particleCanvas\" aria-label=\"Interactive particle animation\" role=\"img\"></canvas>\n</main>\n\n<footer>\n <p>Created with love by Flow</p>\n <nav>\n <a href=\"/about\">About</a>\n <a href=\"/contact\">Contact</a>\n </nav>\n</footer>\n---style.css---\n:root {\n --primary: #2a2a72;\n --secondary: #009ffd;\n --text: #ffffff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: var(--text);\n min-height: 100vh;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n position: relative;\n z-index: 1;\n}\n\nh1 {\n font-size: 3.5rem;\n margin-bottom: 0.5rem;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n font-weight: 800;\n text-shadow: 0 0 20px rgba(0,0,0,0.3);\n}\n\nheader p {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\nmain {\n flex: 1;\n position: relative;\n}\n\n#particleCanvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\nfooter {\n padding: 1.5rem;\n text-align: center;\n position: relative;\n z-index: 1;\n backdrop-filter: blur(10px);\n background: rgba(255,255,255,0.1);\n}\n\nfooter nav {\n margin-top: 0.5rem;\n}\n\nfooter a {\n color: var(--text);\n text-decoration: none;\n margin: 0 1rem;\n transition: opacity 0.3s;\n}\n\nfooter a:hover {\n opacity: 0.8;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2.5rem;\n }\n \n header p {\n font-size: 1rem;\n }\n}\n---script.js---\nclass Particle {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.size = Math.random() * 3 + 1;\n this.speedX = Math.random() * 3 - 1.5;\n this.speedY = Math.random() * 3 - 1.5;\n }\n\n update() {\n this.x += this.speedX;\n this.y += this.speedY;\n \n if (this.size > 0.2) this.size -= 0.1;\n }\n\n draw(ctx) {\n ctx.fillStyle = 'rgba(255,255,255,0.8)';\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n }\n}\n\nclass ParticleSystem {\n constructor() {\n this.canvas = document.getElementById('particleCanvas');\n this.ctx = this.canvas.getContext('2d');\n this.particles = [];\n this.mouse = {\n x: null,\n y: null,\n radius: 150\n };\n\n this.init();\n this.animate();\n this.setupEventListeners();\n }\n\n init() {\n this.resizeCanvas();\n window.addEventListener('resize', () => this.resizeCanvas());\n }\n\n resizeCanvas() {\n this.canvas.width = this.canvas.offsetWidth;\n this.canvas.height = this.canvas.offsetHeight;\n }\n\n setupEventListeners() {\n ['mousemove', 'touchmove'].forEach(eventType => {\n this.canvas.addEventListener(eventType, (e) => {\n if (eventType === 'mousemove') {\n this.mouse.x = e.x;\n this.mouse.y = e.y;\n } else {\n this.mouse.x = e.touches[0].clientX;\n this.mouse.y = e.touches[0].clientY;\n }\n \n for (let i = 0; i < 5; i++) {\n this.particles.push(new Particle(this.mouse.x, this.mouse.y));\n }\n });\n });\n }\n\n animate() {\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n \n this.particles.forEach((particle, index) => {\n particle.update();\n particle.draw(this.ctx);\n \n if (particle.size <= 0.2) {\n this.particles.splice(index, 1);\n }\n });\n \n requestAnimationFrame(() => this.animate());\n }\n}\n\nwindow.addEventListener('load', () => {\n new ParticleSystem();\n});\n---end---\n\nThis creates a beautiful, interactive particle animation website where particles flow and react to user input (mouse/touch). The particles gradually fade out and new ones are created as the user moves their cursor or finger across the screen.\n\nKey features:\n- Smooth particle animation system\n- Touch and mouse interaction support\n- Responsive design\n- Beautiful gradient background\n- Minimalist UI with elegant typography\n- Accessible canvas implementation\n- Performance-optimized animation\n- Clean, modern code structure\n\nThe website uses a class-based approach for the particle system, making the code maintainable and extensible. The design features a gorgeous color scheme with a deep blue to bright blue gradient, complemented by flowing white particles."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 273,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1649
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..617e176
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# flow1.scroll.pub
+Website generated by Claude from prompt: Surprise me
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..39fc6bf
--- /dev/null
+++ b/script.js
@@ -0,0 +1,87 @@
+class Particle {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.size = Math.random() * 3 + 1;
+ this.speedX = Math.random() * 3 - 1.5;
+ this.speedY = Math.random() * 3 - 1.5;
+ }
+
+ update() {
+ this.x += this.speedX;
+ this.y += this.speedY;
+
+ if (this.size > 0.2) this.size -= 0.1;
+ }
+
+ draw(ctx) {
+ ctx.fillStyle = 'rgba(255,255,255,0.8)';
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+ ctx.fill();
+ }
+}
+
+class ParticleSystem {
+ constructor() {
+ this.canvas = document.getElementById('particleCanvas');
+ this.ctx = this.canvas.getContext('2d');
+ this.particles = [];
+ this.mouse = {
+ x: null,
+ y: null,
+ radius: 150
+ };
+
+ this.init();
+ this.animate();
+ this.setupEventListeners();
+ }
+
+ init() {
+ this.resizeCanvas();
+ window.addEventListener('resize', () => this.resizeCanvas());
+ }
+
+ resizeCanvas() {
+ this.canvas.width = this.canvas.offsetWidth;
+ this.canvas.height = this.canvas.offsetHeight;
+ }
+
+ setupEventListeners() {
+ ['mousemove', 'touchmove'].forEach(eventType => {
+ this.canvas.addEventListener(eventType, (e) => {
+ if (eventType === 'mousemove') {
+ this.mouse.x = e.x;
+ this.mouse.y = e.y;
+ } else {
+ this.mouse.x = e.touches[0].clientX;
+ this.mouse.y = e.touches[0].clientY;
+ }
+
+ for (let i = 0; i < 5; i++) {
+ this.particles.push(new Particle(this.mouse.x, this.mouse.y));
+ }
+ });
+ });
+ }
+
+ animate() {
+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+ this.particles.forEach((particle, index) => {
+ particle.update();
+ particle.draw(this.ctx);
+
+ if (particle.size <= 0.2) {
+ this.particles.splice(index, 1);
+ }
+ });
+
+ requestAnimationFrame(() => this.animate());
+ }
+}
+
+window.addEventListener('load', () => {
+ new ParticleSystem();
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6b3dda3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,89 @@
+:root {
+ --primary: #2a2a72;
+ --secondary: #009ffd;
+ --text: #ffffff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: var(--text);
+ min-height: 100vh;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ position: relative;
+ z-index: 1;
+}
+
+h1 {
+ font-size: 3.5rem;
+ margin-bottom: 0.5rem;
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ font-weight: 800;
+ text-shadow: 0 0 20px rgba(0,0,0,0.3);
+}
+
+header p {
+ font-size: 1.2rem;
+ opacity: 0.9;
+}
+
+main {
+ flex: 1;
+ position: relative;
+}
+
+#particleCanvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+footer {
+ padding: 1.5rem;
+ text-align: center;
+ position: relative;
+ z-index: 1;
+ backdrop-filter: blur(10px);
+ background: rgba(255,255,255,0.1);
+}
+
+footer nav {
+ margin-top: 0.5rem;
+}
+
+footer a {
+ color: var(--text);
+ text-decoration: none;
+ margin: 0 1rem;
+ transition: opacity 0.3s;
+}
+
+footer a:hover {
+ opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ header p {
+ font-size: 1rem;
+ }
+}
\ No newline at end of file