Changes to flow1.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Flow
+   Move your cursor or touch to interact
+ 
+ 
+ 
+   
+ 
+ 
+ 
+   Created with love by Flow
+   
+     About
+     Contact
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://flow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Flow - Interactive Particle Animation
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  Flow\n  Move your cursor or touch to interact
\n\n\n\n  \n\n\n\n  Created with love by Flow
\n  \n    About\n    Contact\n  \n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # flow1.scroll.pub

+ Website generated by Claude from prompt: Surprise me

script.js

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

style.css

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