Changes to sparkle.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Particle Symphony
+   Move your cursor to conduct
+ 
+ 
+ 
+   
+   
+     
+     
+   
+ 
+ 
+ 
+   
+     About
+     Contact
+   
+   Created with love for the digital arts
+ 

index.scroll

Changed around line 1
+ 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

prompt.json

Changed around line 1
+ {
+   "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\n  Particle Symphony\n  Move your cursor to conduct
\n\n\n\n  \n  \n    \n    \n  
\n\n\n\n  \n    About\n    Contact\n  \n  Created with love for the digital arts
\n\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 in, 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
+   }
+ }

readme.scroll

Changed around line 1

+ # sparkle.scroll.pub

+ Website generated by Claude from prompt: Surprise me

script.js

Changed around line 1
+ 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 in, 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();
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }