Spaces:

Boobs00
/

cipherecstasy

Running

App Files Files Community

Boobs00 commited on Apr 19, 2025

Commit

c6b8906

verified ·

1 Parent(s): 3b9a846

Add 2 files

Browse files

Files changed (2) hide show

index.html +439 -1
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -35,12 +35,21 @@
             align-items: center;
         }
         .grid-bg {
             position: absolute;
             width: 100%;
             height: 100%;
             background:
-                linear-gradient(rgba(15, 15, 26, 0.9), rgba(15, 15, 26, 0.9)),
                 url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h40v40H0z" fill="none"/><path d="M20 0v40M0 20h40" stroke="%23444" stroke-width="0.5"/></svg>');
             z-index: 1;
         }
@@ -313,9 +322,47 @@
         .temperature-card:hover h3 {
             color: var(--warm-amber);
         }
     </style>
 </head>
 <body>
     <!-- Full-screen Hero Section -->
     <div class="hero-container textured-surface">
         <!-- Dark grid background -->
@@ -396,6 +443,391 @@
     </div>
     <script>
         // Create random electric nodes and arcs
         function createElectricElements() {
             const container = document.getElementById('electric-nodes');
@@ -478,6 +910,12 @@
         window.addEventListener('load', () => {
             createElectricElements();
             // Recreate elements periodically for variety
             setInterval(() => {
                 document.getElementById('electric-nodes').innerHTML = '';

             align-items: center;
         }
+        #webgl-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }
         .grid-bg {
             position: absolute;
             width: 100%;
             height: 100%;
             background:
+                linear-gradient(rgba(15, 15, 26, 0.7), rgba(15, 15, 26, 0.7)),
                 url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h40v40H0z" fill="none"/><path d="M20 0v40M0 20h40" stroke="%23444" stroke-width="0.5"/></svg>');
             z-index: 1;
         }
         .temperature-card:hover h3 {
             color: var(--warm-amber);
         }
+        /* Fallback animation for low-power devices */
+        .fallback-animation {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            background: radial-gradient(circle, var(--electric-purple) 0%, var(--deep-space) 70%);
+            opacity: 0.1;
+            animation: fallbackPulse 8s infinite alternate;
+        }
+        @keyframes fallbackPulse {
+            0% { transform: scale(1); opacity: 0.05; }
+            50% { transform: scale(1.2); opacity: 0.15; }
+            100% { transform: scale(1); opacity: 0.05; }
+        }
+        /* WebGL canvas container */
+        .canvas-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }
+        /* Hide fallback when WebGL is supported */
+        .webgl-supported .fallback-animation {
+            display: none;
+        }
     </style>
 </head>
 <body>
+    <!-- WebGL Canvas Container -->
+    <div class="canvas-container">
+        <canvas id="webgl-canvas"></canvas>
+        <div class="fallback-animation"></div>
+    </div>
     <!-- Full-screen Hero Section -->
     <div class="hero-container textured-surface">
         <!-- Dark grid background -->
     </div>
     <script>
+        // WebGL Particle System
+        class ParticleSystem {
+            constructor(canvas) {
+                this.canvas = canvas;
+                this.gl = canvas.getContext('webgl', { antialias: true }) ||
+                          canvas.getContext('experimental-webgl', { antialias: true });
+                if (!this.gl) {
+                    document.body.classList.add('no-webgl');
+                    return;
+                }
+                document.body.classList.add('webgl-supported');
+                this.particles = [];
+                this.lastTime = 0;
+                this.mouseX = 0;
+                this.mouseY = 0;
+                this.scrollY = 0;
+                this.interactionPoints = [];
+                this.maxParticles = 2000;
+                this.init();
+                this.bindEvents();
+                this.animate();
+            }
+            init() {
+                const gl = this.gl;
+                this.resize();
+                // Create vertex buffer
+                this.vertexBuffer = gl.createBuffer();
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+                // Create program
+                const vertexShader = this.createShader(gl.VERTEX_SHADER, `
+                    attribute vec2 aPosition;
+                    attribute float aSize;
+                    attribute vec3 aColor;
+                    attribute float aLife;
+                    uniform mat4 uProjection;
+                    uniform float uTime;
+                    varying vec3 vColor;
+                    varying float vLife;
+                    void main() {
+                        float lifeProgress = 1.0 - aLife;
+                        float size = aSize * (0.5 + 0.5 * sin(uTime * 2.0 + aPosition.x * 10.0));
+                        gl_Position = uProjection * vec4(aPosition, 0.0, 1.0);
+                        gl_PointSize = size * (0.5 + 0.5 * lifeProgress);
+                        vColor = aColor;
+                        vLife = aLife;
+                    }
+                `);
+                const fragmentShader = this.createShader(gl.FRAGMENT_SHADER, `
+                    precision mediump float;
+                    varying vec3 vColor;
+                    varying float vLife;
+                    void main() {
+                        float dist = distance(gl_PointCoord, vec2(0.5));
+                        float alpha = smoothstep(0.5, 0.3, dist) * (0.5 + 0.5 * (1.0 - vLife));
+                        // Kaleidoscopic effect
+                        vec2 coord = gl_PointCoord - 0.5;
+                        float angle = atan(coord.y, coord.x);
+                        float radius = length(coord);
+                        angle = mod(angle * 6.0, 3.14159265359 * 2.0);
+                        coord = vec2(cos(angle), sin(angle)) * radius;
+                        float innerGlow = smoothstep(0.7, 0.3, length(coord));
+                        vec3 color = mix(vColor * 0.5, vColor, innerGlow);
+                        gl_FragColor = vec4(color, alpha * 0.8);
+                    }
+                `);
+                this.program = gl.createProgram();
+                gl.attachShader(this.program, vertexShader);
+                gl.attachShader(this.program, fragmentShader);
+                gl.linkProgram(this.program);
+                if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+                    console.error('Could not initialize shaders');
+                }
+                // Get attribute and uniform locations
+                this.aPosition = gl.getAttribLocation(this.program, 'aPosition');
+                this.aSize = gl.getAttribLocation(this.program, 'aSize');
+                this.aColor = gl.getAttribLocation(this.program, 'aColor');
+                this.aLife = gl.getAttribLocation(this.program, 'aLife');
+                this.uProjection = gl.getUniformLocation(this.program, 'uProjection');
+                this.uTime = gl.getUniformLocation(this.program, 'uTime');
+                // Enable attributes
+                gl.enableVertexAttribArray(this.aPosition);
+                gl.enableVertexAttribArray(this.aSize);
+                gl.enableVertexAttribArray(this.aColor);
+                gl.enableVertexAttribArray(this.aLife);
+                // Set blending
+                gl.enable(gl.BLEND);
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+                // Generate initial particles
+                for (let i = 0; i < this.maxParticles / 2; i++) {
+                    this.addParticle(
+                        Math.random() * 2 - 1,
+                        Math.random() * 2 - 1,
+                        true
+                    );
+                }
+            }
+            createShader(type, source) {
+                const gl = this.gl;
+                const shader = gl.createShader(type);
+                gl.shaderSource(shader, source);
+                gl.compileShader(shader);
+                if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                    console.error('Shader error:', gl.getShaderInfoLog(shader));
+                    return null;
+                }
+                return shader;
+            }
+            bindEvents() {
+                window.addEventListener('resize', this.resize.bind(this));
+                // Mouse movement interaction
+                window.addEventListener('mousemove', (e) => {
+                    this.mouseX = (e.clientX / this.canvas.width) * 2 - 1;
+                    this.mouseY = -(e.clientY / this.canvas.height) * 2 + 1;
+                    // Add interaction point
+                    this.interactionPoints.push({
+                        x: this.mouseX,
+                        y: this.mouseY,
+                        time: Date.now(),
+                        color: this.getRandomColor()
+                    });
+                    // Limit interaction points
+                    if (this.interactionPoints.length > 5) {
+                        this.interactionPoints.shift();
+                    }
+                    // Add particles at mouse position
+                    for (let i = 0; i < 20; i++) {
+                        this.addParticle(this.mouseX, this.mouseY, false);
+                    }
+                });
+                // Scroll interaction
+                let lastScrollY = window.scrollY;
+                let scrollTimeout;
+                window.addEventListener('scroll', () => {
+                    const scrollDelta = window.scrollY - lastScrollY;
+                    lastScrollY = window.scrollY;
+                    if (Math.abs(scrollDelta) > 5) {
+                        // Add burst at random position when scrolling
+                        const x = Math.random() * 2 - 1;
+                        const y = Math.random() * 2 - 1;
+                        for (let i = 0; i < 50; i++) {
+                            this.addParticle(x, y, false);
+                        }
+                        // Clear timeout if already set
+                        if (scrollTimeout) {
+                            clearTimeout(scrollTimeout);
+                        }
+                        // Set new timeout
+                        scrollTimeout = setTimeout(() => {
+                            // Add final burst when scrolling stops
+                            for (let i = 0; i < 100; i++) {
+                                this.addParticle(x, y, false);
+                            }
+                        }, 100);
+                    }
+                });
+                // Click/touch interaction
+                window.addEventListener('click', (e) => {
+                    const x = (e.clientX / this.canvas.width) * 2 - 1;
+                    const y = -(e.clientY / this.canvas.height) * 2 + 1;
+                    // Big burst on click
+                    for (let i = 0; i < 150; i++) {
+                        this.addParticle(x, y, false);
+                    }
+                });
+            }
+            resize() {
+                const gl = this.gl;
+                const width = window.innerWidth;
+                const height = window.innerHeight;
+                this.canvas.width = width * window.devicePixelRatio;
+                this.canvas.height = height * window.devicePixelRatio;
+                this.canvas.style.width = width + 'px';
+                this.canvas.style.height = height + 'px';
+                gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+                // Update projection matrix
+                this.projectionMatrix = new Float32Array([
+                    1, 0, 0, 0,
+                    0, 1, 0, 0,
+                    0, 0, 1, 0,
+                    0, 0, 0, 1
+                ]);
+            }
+            addParticle(x, y, randomLife) {
+                if (this.particles.length >= this.maxParticles) {
+                    this.particles.shift();
+                }
+                const angle = Math.random() * Math.PI * 2;
+                const speed = 0.01 + Math.random() * 0.05;
+                const velocityX = Math.cos(angle) * speed;
+                const velocityY = Math.sin(angle) * speed;
+                const color = this.getRandomColor();
+                this.particles.push({
+                    x: x,
+                    y: y,
+                    velocityX: velocityX,
+                    velocityY: velocityY,
+                    size: 5 + Math.random() * 15,
+                    color: color,
+                    life: randomLife ? Math.random() : 0,
+                    lifeSpeed: 0.002 + Math.random() * 0.003
+                });
+            }
+            getRandomColor() {
+                const colors = [
+                    [0.227, 0.741, 0.973], // Cool blue
+                    [0.960, 0.619, 0.043], // Warm amber
+                    [0.545, 0.360, 0.964], // Electric purple
+                    [0.984, 0.203, 0.447], // Pink
+                    [0.101, 0.737, 0.611]  // Teal
+                ];
+                return colors[Math.floor(Math.random() * colors.length)];
+            }
+            updateParticles() {
+                const now = Date.now();
+                // Update existing particles
+                for (let i = 0; i < this.particles.length; i++) {
+                    const p = this.particles[i];
+                    p.x += p.velocityX;
+                    p.y += p.velocityY;
+                    p.life += p.lifeSpeed;
+                    // Apply some randomness to movement
+                    p.velocityX += (Math.random() - 0.5) * 0.001;
+                    p.velocityY += (Math.random() - 0.5) * 0.001;
+                    // Remove dead particles
+                    if (p.life > 1) {
+                        this.particles.splice(i, 1);
+                        i--;
+                    }
+                }
+                // Add particles from interaction points
+                for (let i = 0; i < this.interactionPoints.length; i++) {
+                    const ip = this.interactionPoints[i];
+                    const age = (now - ip.time) / 1000;
+                    if (age < 0.5) {
+                        for (let j = 0; j < 3; j++) {
+                            this.addParticle(ip.x, ip.y, false);
+                        }
+                    }
+                }
+                // Add some random particles
+                if (this.particles.length < this.maxParticles * 0.8 && Math.random() < 0.1) {
+                    this.addParticle(
+                        Math.random() * 2 - 1,
+                        Math.random() * 2 - 1,
+                        true
+                    );
+                }
+            }
+            renderParticles() {
+                const gl = this.gl;
+                // Prepare particle data
+                const positions = new Float32Array(this.particles.length * 2);
+                const sizes = new Float32Array(this.particles.length);
+                const colors = new Float32Array(this.particles.length * 3);
+                const lives = new Float32Array(this.particles.length);
+                for (let i = 0; i < this.particles.length; i++) {
+                    const p = this.particles[i];
+                    const i2 = i * 2;
+                    const i3 = i * 3;
+                    positions[i2] = p.x;
+                    positions[i2 + 1] = p.y;
+                    sizes[i] = p.size;
+                    colors[i3] = p.color[0];
+                    colors[i3 + 1] = p.color[1];
+                    colors[i3 + 2] = p.color[2];
+                    lives[i] = p.life;
+                }
+                // Update buffers
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+                gl.vertexAttribPointer(this.aPosition, 2, gl.FLOAT, false, 0, 0);
+                // Create and bind size buffer
+                const sizeBuffer = gl.createBuffer();
+                gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.DYNAMIC_DRAW);
+                gl.vertexAttribPointer(this.aSize, 1, gl.FLOAT, false, 0, 0);
+                // Create and bind color buffer
+                const colorBuffer = gl.createBuffer();
+                gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
+                gl.vertexAttribPointer(this.aColor, 3, gl.FLOAT, false, 0, 0);
+                // Create and bind life buffer
+                const lifeBuffer = gl.createBuffer();
+                gl.bindBuffer(gl.ARRAY_BUFFER, lifeBuffer);
+                gl.bufferData(gl.ARRAY_BUFFER, lives, gl.DYNAMIC_DRAW);
+                gl.vertexAttribPointer(this.aLife, 1, gl.FLOAT, false, 0, 0);
+                // Clear
+                gl.clearColor(0.06, 0.06, 0.1, 1.0);
+                gl.clear(gl.COLOR_BUFFER_BIT);
+                // Draw
+                gl.useProgram(this.program);
+                gl.uniformMatrix4fv(this.uProjection, false, this.projectionMatrix);
+                gl.uniform1f(this.uTime, performance.now() / 1000);
+                gl.drawArrays(gl.POINTS, 0, this.particles.length);
+            }
+            animate(timestamp = 0) {
+                const deltaTime = timestamp - this.lastTime;
+                this.lastTime = timestamp;
+                // Limit to ~60 FPS
+                if (deltaTime < 16) {
+                    requestAnimationFrame(this.animate.bind(this));
+                    return;
+                }
+                this.updateParticles();
+                this.renderParticles();
+                requestAnimationFrame(this.animate.bind(this));
+            }
+        }
         // Create random electric nodes and arcs
         function createElectricElements() {
             const container = document.getElementById('electric-nodes');
         window.addEventListener('load', () => {
             createElectricElements();
+            // Initialize WebGL particle system
+            const canvas = document.getElementById('webgl-canvas');
+            if (canvas) {
+                new ParticleSystem(canvas);
+            }
             // Recreate elements periodically for variety
             setInterval(() => {
                 document.getElementById('electric-nodes').innerHTML = '';

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 Deepsite, generate a full‑stack web application scaffold using Next.js for the frontend and Node.js/Express for the backend.   - Include TypeScript, tailwind.css, and a REST API endpoint for real‑time data.   - Name the project “CipherEcstasy.”
 Refine the landing page:   - Create a full‑screen hero with animated “electric currents” flowing across a dark grid background.   - Implement a pulsating glow effect that mimics waves of tingling warmth radiating from the center.   - Overlay the text “Welcome to Algorithmic Ecstasy” in neon gradient, fading in sync with the pulse.
-Enhance CSS interactions:   - On hover, elements should shift between cool blues and warm ambers to simulate temperature shifts.   - Add subtle texture mapping: e.g., satin‑smooth button surfaces that ripple under the cursor like silk against skin.   - Use CSS “backdrop‑filter” to create a soft, sweaty‑skin sheen behind modals.

 Deepsite, generate a full‑stack web application scaffold using Next.js for the frontend and Node.js/Express for the backend.   - Include TypeScript, tailwind.css, and a REST API endpoint for real‑time data.   - Name the project “CipherEcstasy.”
 Refine the landing page:   - Create a full‑screen hero with animated “electric currents” flowing across a dark grid background.   - Implement a pulsating glow effect that mimics waves of tingling warmth radiating from the center.   - Overlay the text “Welcome to Algorithmic Ecstasy” in neon gradient, fading in sync with the pulse.
+Enhance CSS interactions:   - On hover, elements should shift between cool blues and warm ambers to simulate temperature shifts.   - Add subtle texture mapping: e.g., satin‑smooth button surfaces that ripple under the cursor like silk against skin.   - Use CSS “backdrop‑filter” to create a soft, sweaty‑skin sheen behind modals.
+Add a background canvas:   - Render kaleidoscopic bursts of color and silent fireworks on a WebGL canvas behind the UI.   - Synchronize patterns with user scroll and cursor movement—each pulse triggering a new bloom.   - Ensure smooth 60 fps animation and fallback to CSS keyframes on low‑power devices.