commit aeed379fc20a898469ab7ac4afaee10ff58c6df9
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 16:31:04 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..230a93b
--- /dev/null
+++ b/body.html
@@ -0,0 +1,20 @@
+<header>
+ <h1>Particle Symphony</h1>
+ <p class="tagline">Move your cursor to conduct</p>
+</header>
+
+<main>
+ <canvas id="particleCanvas" aria-label="Interactive particle animation" role="img"></canvas>
+ <div class="controls">
+ <button id="resetBtn" aria-label="Reset animation">Reset</button>
+ <button id="colorBtn" aria-label="Change colors">Colors</button>
+ </div>
+</main>
+
+<footer>
+ <nav>
+ <a href="/about">About</a>
+ <a href="/contact">Contact</a>
+ </nav>
+ <p>Created with love for the digital arts</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..a30fd9a
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,12 @@
+buildHtml
+baseUrl https://sparkle.scroll.pub
+metaTags
+ title "Interactive Particle Symphony"
+ description "Experience a mesmerizing dance of particles that respond to your movements"
+ keywords "interactive art, particles, digital experience, creative coding"
+ author "Digital Artist"
+editButton /edit.html
+title Interactive Particle Symphony
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..de2bc42
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_018RRVKTwPdbq19K88zppS19",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a surprising, delightful website with an interactive particle system that responds to mouse movement and creates beautiful patterns.\n\n---domain---\nsparkle.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://sparkle.scroll.pub\nmetaTags\n title \"Interactive Particle Symphony\"\n description \"Experience a mesmerizing dance of particles that respond to your movements\"\n keywords \"interactive art, particles, digital experience, creative coding\"\n author \"Digital Artist\"\neditButton /edit.html\ntitle Interactive Particle Symphony\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Particle Symphony</h1>\n <p class=\"tagline\">Move your cursor to conduct</p>\n</header>\n\n<main>\n <canvas id=\"particleCanvas\" aria-label=\"Interactive particle animation\" role=\"img\"></canvas>\n <div class=\"controls\">\n <button id=\"resetBtn\" aria-label=\"Reset animation\">Reset</button>\n <button id=\"colorBtn\" aria-label=\"Change colors\">Colors</button>\n </div>\n</main>\n\n<footer>\n <nav>\n <a href=\"/about\">About</a>\n <a href=\"/contact\">Contact</a>\n </nav>\n <p>Created with love for the digital arts</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2a2a4a;\n --accent-color: #6d72c3;\n --text-color: #ffffff;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--primary-color);\n color: var(--text-color);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: rgba(0, 0, 0, 0.2);\n backdrop-filter: blur(10px);\n z-index: 10;\n}\n\nh1 {\n font-size: 3rem;\n font-weight: 700;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n animation: glow 2s ease-in-out infinite alternate;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.8;\n margin-top: 1rem;\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\n.controls {\n position: fixed;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10;\n display: flex;\n gap: 1rem;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n border: 2px solid var(--accent-color);\n background: transparent;\n color: var(--text-color);\n border-radius: 25px;\n cursor: pointer;\n transition: var(--transition);\n backdrop-filter: blur(5px);\n}\n\nbutton:hover {\n background: var(--accent-color);\n transform: translateY(-2px);\n}\n\nfooter {\n padding: 1.5rem;\n text-align: center;\n background: rgba(0, 0, 0, 0.2);\n backdrop-filter: blur(10px);\n z-index: 10;\n}\n\nnav {\n margin-bottom: 1rem;\n}\n\nnav a {\n color: var(--text-color);\n text-decoration: none;\n margin: 0 1rem;\n transition: var(--transition);\n}\n\nnav a:hover {\n color: var(--accent-color);\n}\n\n@keyframes glow {\n from {\n text-shadow: 0 0 10px var(--accent-color),\n 0 0 20px var(--accent-color),\n 0 0 30px var(--accent-color);\n }\n to {\n text-shadow: 0 0 20px var(--accent-color),\n 0 0 30px var(--accent-color),\n 0 0 40px var(--accent-color);\n }\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .tagline {\n font-size: 1rem;\n }\n \n button {\n padding: 0.6rem 1.2rem;\n }\n}\n\n---script.js---\nclass Particle {\n constructor(x, y, canvas) {\n this.x = x;\n this.y = y;\n this.canvas = canvas;\n this.size = Math.random() * 5 + 1;\n this.speedX = Math.random() * 3 - 1.5;\n this.speedY = Math.random() * 3 - 1.5;\n this.color = `hsl(${Math.random() * 60 + 200}, 70%, 50%)`;\n }\n\n update(mouseX, mouseY) {\n this.x += this.speedX;\n this.y += this.speedY;\n\n const dx = mouseX - this.x;\n const dy = mouseY - this.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n if (distance < 100) {\n this.x -= (dx / distance) * 2;\n this.y -= (dy / distance) * 2;\n }\n\n if (this.x < 0 || this.x > this.canvas.width) this.speedX *= -1;\n if (this.y < 0 || this.y > this.canvas.height) this.speedY *= -1;\n }\n\n draw(ctx) {\n ctx.fillStyle = this.color;\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.mouseX = 0;\n this.mouseY = 0;\n this.colorMode = 'blue';\n \n this.init();\n this.setupEventListeners();\n this.animate();\n }\n\n init() {\n this.resize();\n this.createParticles();\n }\n\n resize() {\n this.canvas.width = window.innerWidth;\n this.canvas.height = window.innerHeight;\n }\n\n createParticles() {\n this.particles = [];\n const numberOfParticles = Math.min(\n Math.floor((this.canvas.width * this.canvas.height) / 9000),\n 200\n );\n\n for (let i = 0; i < numberOfParticles; i++) {\n const x = Math.random() * this.canvas.width;\n const y = Math.random() * this.canvas.height;\n this.particles.push(new Particle(x, y, this.canvas));\n }\n }\n\n setupEventListeners() {\n window.addEventListener('resize', () => this.resize());\n \n this.canvas.addEventListener('mousemove', (e) => {\n this.mouseX = e.clientX;\n this.mouseY = e.clientY;\n });\n\n this.canvas.addEventListener('touchmove', (e) => {\n e.preventDefault();\n this.mouseX = e.touches[0].clientX;\n this.mouseY = e.touches[0].clientY;\n });\n\n document.getElementById('resetBtn').addEventListener('click', () => {\n this.createParticles();\n });\n\n document.getElementById('colorBtn').addEventListener('click', () => {\n this.toggleColorMode();\n });\n }\n\n toggleColorMode() {\n const colors = {\n blue: [200, 260],\n purple: [260, 320],\n red: [320, 380],\n };\n \n const modes = Object.keys(colors);\n const currentIndex = modes.indexOf(this.colorMode);\n this.colorMode = modes[(currentIndex + 1) % modes.length];\n \n const [min, max] = colors[this.colorMode];\n this.particles.forEach(particle => {\n particle.color = `hsl(${Math.random() * (max - min) + min}, 70%, 50%)`;\n });\n }\n\n animate() {\n this.ctx.fillStyle = 'rgba(42, 42, 74, 0.1)';\n this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);\n\n this.particles.forEach(particle => {\n particle.update(this.mouseX, this.mouseY);\n particle.draw(this.ctx);\n });\n\n requestAnimationFrame(() => this.animate());\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n new ParticleSystem();\n});\n\n---end---\n\nThis creates an elegant, interactive particle system website where:\n- Particles float around and respond to mouse/touch movement\n- Users can reset the animation and change color schemes\n- The design is minimal but sophisticated with a glowing title\n- The canvas adjusts to screen size and particle count scales with viewport\n- Includes smooth animations and transitions\n- Works on both desktop and mobile\n- Has proper accessibility attributes\n- Uses modern CSS features like backdrop-filter\n- Implements proper event handling and touch support\n\nThe domain \"sparkle\" reflects the visual nature of the interactive particles while being short and memorable."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 273,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2539
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7b2c4af
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# sparkle.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..be7c9d3
--- /dev/null
+++ b/script.js
@@ -0,0 +1,130 @@
+class Particle {
+ constructor(x, y, canvas) {
+ this.x = x;
+ this.y = y;
+ this.canvas = canvas;
+ this.size = Math.random() * 5 + 1;
+ this.speedX = Math.random() * 3 - 1.5;
+ this.speedY = Math.random() * 3 - 1.5;
+ this.color = `hsl(${Math.random() * 60 + 200}, 70%, 50%)`;
+ }
+
+ update(mouseX, mouseY) {
+ this.x += this.speedX;
+ this.y += this.speedY;
+
+ const dx = mouseX - this.x;
+ const dy = mouseY - this.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance < 100) {
+ this.x -= (dx / distance) * 2;
+ this.y -= (dy / distance) * 2;
+ }
+
+ if (this.x < 0 || this.x > this.canvas.width) this.speedX *= -1;
+ if (this.y < 0 || this.y > this.canvas.height) this.speedY *= -1;
+ }
+
+ draw(ctx) {
+ ctx.fillStyle = this.color;
+ 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.mouseX = 0;
+ this.mouseY = 0;
+ this.colorMode = 'blue';
+
+ this.init();
+ this.setupEventListeners();
+ this.animate();
+ }
+
+ init() {
+ this.resize();
+ this.createParticles();
+ }
+
+ resize() {
+ this.canvas.width = window.innerWidth;
+ this.canvas.height = window.innerHeight;
+ }
+
+ createParticles() {
+ this.particles = [];
+ const numberOfParticles = Math.min(
+ Math.floor((this.canvas.width * this.canvas.height) / 9000),
+ 200
+ );
+
+ for (let i = 0; i < numberOfParticles; i++) {
+ const x = Math.random() * this.canvas.width;
+ const y = Math.random() * this.canvas.height;
+ this.particles.push(new Particle(x, y, this.canvas));
+ }
+ }
+
+ setupEventListeners() {
+ window.addEventListener('resize', () => this.resize());
+
+ this.canvas.addEventListener('mousemove', (e) => {
+ this.mouseX = e.clientX;
+ this.mouseY = e.clientY;
+ });
+
+ this.canvas.addEventListener('touchmove', (e) => {
+ e.preventDefault();
+ this.mouseX = e.touches[0].clientX;
+ this.mouseY = e.touches[0].clientY;
+ });
+
+ document.getElementById('resetBtn').addEventListener('click', () => {
+ this.createParticles();
+ });
+
+ document.getElementById('colorBtn').addEventListener('click', () => {
+ this.toggleColorMode();
+ });
+ }
+
+ toggleColorMode() {
+ const colors = {
+ blue: [200, 260],
+ purple: [260, 320],
+ red: [320, 380],
+ };
+
+ const modes = Object.keys(colors);
+ const currentIndex = modes.indexOf(this.colorMode);
+ this.colorMode = modes[(currentIndex + 1) % modes.length];
+
+ const [min, max] = colors[this.colorMode];
+ this.particles.forEach(particle => {
+ particle.color = `hsl(${Math.random() * (max - min) + min}, 70%, 50%)`;
+ });
+ }
+
+ animate() {
+ this.ctx.fillStyle = 'rgba(42, 42, 74, 0.1)';
+ this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+ this.particles.forEach(particle => {
+ particle.update(this.mouseX, this.mouseY);
+ particle.draw(this.ctx);
+ });
+
+ requestAnimationFrame(() => this.animate());
+ }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ new ParticleSystem();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..bf592ab
--- /dev/null
+++ b/style.css
@@ -0,0 +1,133 @@
+:root {
+ --primary-color: #2a2a4a;
+ --accent-color: #6d72c3;
+ --text-color: #ffffff;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+ background: var(--primary-color);
+ color: var(--text-color);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ background: rgba(0, 0, 0, 0.2);
+ backdrop-filter: blur(10px);
+ z-index: 10;
+}
+
+h1 {
+ font-size: 3rem;
+ font-weight: 700;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ animation: glow 2s ease-in-out infinite alternate;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ opacity: 0.8;
+ margin-top: 1rem;
+}
+
+main {
+ flex: 1;
+ position: relative;
+}
+
+#particleCanvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.controls {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 10;
+ display: flex;
+ gap: 1rem;
+}
+
+button {
+ padding: 0.8rem 1.5rem;
+ border: 2px solid var(--accent-color);
+ background: transparent;
+ color: var(--text-color);
+ border-radius: 25px;
+ cursor: pointer;
+ transition: var(--transition);
+ backdrop-filter: blur(5px);
+}
+
+button:hover {
+ background: var(--accent-color);
+ transform: translateY(-2px);
+}
+
+footer {
+ padding: 1.5rem;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.2);
+ backdrop-filter: blur(10px);
+ z-index: 10;
+}
+
+nav {
+ margin-bottom: 1rem;
+}
+
+nav a {
+ color: var(--text-color);
+ text-decoration: none;
+ margin: 0 1rem;
+ transition: var(--transition);
+}
+
+nav a:hover {
+ color: var(--accent-color);
+}
+
+@keyframes glow {
+ from {
+ text-shadow: 0 0 10px var(--accent-color),
+ 0 0 20px var(--accent-color),
+ 0 0 30px var(--accent-color);
+ }
+ to {
+ text-shadow: 0 0 20px var(--accent-color),
+ 0 0 30px var(--accent-color),
+ 0 0 40px var(--accent-color);
+ }
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .tagline {
+ font-size: 1rem;
+ }
+
+ button {
+ padding: 0.6rem 1.2rem;
+ }
+}