Twinkling Stars Parallax

Scroll down to see the parallax effect. This background can be integrated into a SvelteKit project.

import * as THREE from 'three'; // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 20; // Renderer setup const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Star layers for parallax effect const starLayers = []; const layerCount = 3; const starsPerLayer = 200; // Create star material with custom shader for twinkling const starMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); gl_PointSize = 3.0; } `, fragmentShader: ` uniform float time; varying vec2 vUv; float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); } void main() { vec2 center = vec2(0.5, 0.5); float dist = distance(gl_PointCoord, center); // Create circular point if (dist > 0.5) discard; // Random twinkling based on position and time float randVal = random(vUv); float twinkle = sin(time * (randVal * 3.0) + randVal * 10.0) * 0.5 + 0.5; // Brighter center float brightness = 1.0 - (dist * 2.0); brightness = pow(brightness, 1.5); // Final color with twinkling vec3 color = vec3(1.0, 1.0, 1.0) * brightness * (0.5 + twinkle * 0.5); gl_FragColor = vec4(color, 1.0); } `, transparent: true, blending: THREE.AdditiveBlending }); // Create star layers for (let layer = 0; layer < layerCount; layer++) { const positions = new Float32Array(starsPerLayer * 3); const geometry = new THREE.BufferGeometry(); // Generate random star positions for (let i = 0; i < starsPerLayer; i++) { const i3 = i * 3; positions[i3] = (Math.random() - 0.5) * 100; // x positions[i3 + 1] = (Math.random() - 0.5) * 100; // y positions[i3 + 2] = (Math.random() - 0.5) * 20; // z } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); // Create points for this layer const stars = new THREE.Points(geometry, starMaterial.clone()); stars.material.uniforms.time = { value: Math.random() * 100 }; stars.renderOrder = layer; // Set layer depth based on index (for parallax) stars.position.z = -layer * 10; stars.userData = { speed: 0.05 + layer * 0.1, // Different speeds for different layers originalZ: stars.position.z }; scene.add(stars); starLayers.push(stars); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Track scroll position for parallax let scrollY = 0; window.addEventListener('scroll', () => { scrollY = window.scrollY; }); // Animation loop function animate() { requestAnimationFrame(animate); // Update time uniform for twinkling effect starLayers.forEach(layer => { layer.material.uniforms.time.value += 0.01; // Parallax effect based on scroll const parallaxOffset = scrollY * layer.userData.speed * 0.01; layer.position.z = layer.userData.originalZ + parallaxOffset; }); renderer.render(scene, camera); } animate(); import * as THREE from 'three'; export function createStarBackground(container) { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.1, 1000); camera.position.z = 20; // Renderer setup const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); // Star layers for parallax effect const starLayers = []; const layerCount = 3; const starsPerLayer = 200; // Create star material with custom shader for twinkling const starMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); gl_PointSize = 3.0; } `, fragmentShader: ` uniform float time; varying vec2 vUv; float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); } void main() { vec2 center = vec2(0.5, 0.5); float dist = distance(gl_PointCoord, center); // Create circular point if (dist > 0.5) discard; // Random twinkling based on position and time float randVal = random(vUv); float twinkle = sin(time * (randVal * 3.0) + randVal * 10.0) * 0.5 + 0.5; // Brighter center float brightness = 1.0 - (dist * 2.0); brightness = pow(brightness, 1.5); // Final color with twinkling vec3 color = vec3(1.0, 1.0, 1.0) * brightness * (0.5 + twinkle * 0.5); gl_FragColor = vec4(color, 1.0); } `, transparent: true, blending: THREE.AdditiveBlending }); // Create star layers for (let layer = 0; layer < layerCount; layer++) { const positions = new Float32Array(starsPerLayer * 3); const geometry = new THREE.BufferGeometry(); // Generate random star positions for (let i = 0; i < starsPerLayer; i++) { const i3 = i * 3; positions[i3] = (Math.random() - 0.5) * 100; // x positions[i3 + 1] = (Math.random() - 0.5) * 100; // y positions[i3 + 2] = (Math.random() - 0.5) * 20; // z } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); // Create points for this layer const stars = new THREE.Points(geometry, starMaterial.clone()); stars.material.uniforms.time = { value: Math.random() * 100 }; stars.renderOrder = layer; // Set layer depth based on index (for parallax) stars.position.z = -layer * 10; stars.userData = { speed: 0.05 + layer * 0.1, // Different speeds for different layers originalZ: stars.position.z }; scene.add(stars); starLayers.push(stars); } // Handle window resize const handleResize = () => { camera.aspect = container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); }; window.addEventListener('resize', handleResize); // Track scroll position for parallax let scrollY = 0; const handleScroll = () => { scrollY = window.scrollY; }; window.addEventListener('scroll', handleScroll); // Animation loop let animationId; function animate() { animationId = requestAnimationFrame(animate); // Update time uniform for twinkling effect starLayers.forEach(layer => { layer.material.uniforms.time.value += 0.01; // Parallax effect based on scroll const parallaxOffset = scrollY * layer.userData.speed * 0.01; layer.position.z = layer.userData.originalZ + parallaxOffset; }); renderer.render(scene, camera); } // Start animation animate(); // Return cleanup function return { destroy: () => { window.removeEventListener('resize', handleResize); window.removeEventListener('scroll', handleScroll); cancelAnimationFrame(animationId); // Dispose resources starLayers.forEach(layer => { layer.geometry.dispose(); layer.material.dispose(); }); renderer.dispose(); // Remove canvas if (container.contains(renderer.domElement)) { container.removeChild(renderer.domElement); } } }; }

# How to Use the Star Background in SvelteKit ## 1. Copy the Required Files Copy these files to your SvelteKit project: - `svelte-integration.js` - Core Three.js implementation - `StarBackground.svelte` - Svelte component wrapper ## 2. Add to Your Layout or Page ### Option 1: Add to Layout (for all pages) In your `src/routes/+layout.svelte`: ```svelte ``` ### Option 2: Add to Specific Page In your page file (e.g., `src/routes/+page.svelte`): ```svelte

Your Page Content

``` ## 3. Add Three.js to Your Dependencies Make sure to install Three.js: ```bash npm install three ``` ## 4. Configure Vite for Three.js (if needed) In your `svelte.config.js`, you might need to add: ```js const config = { // ... other config kit: { // ... other kit config }, vite: { ssr: { noExternal: ['three'] } } }; ``` ## Notes - The star background uses fixed positioning and will cover the entire viewport - Content should be positioned with a higher z-index to appear above the stars - The parallax effect responds to page scrolling automatically He creado un efecto de estrellas destellantes con parallax que puedes integrar fácilmente en tu proyecto SvelteKit. El efecto consiste en pequeñas estrellas que brillan con intensidad variable y se mueven sutilmente cuando el usuario hace scroll. Para probar el efecto, puedes abrir el archivo index.html. Para integrarlo en tu proyecto SvelteKit, he incluido: 1. Un componente Svelte listo para usar (`StarBackground.svelte`) 2. El archivo de integración principal (`svelte-integration.js`) 3. Instrucciones detalladas en `sveltekit-usage-example.md` El efecto utiliza Three.js con shaders personalizados para crear estrellas realistas que: - Brillan y destellan con un efecto natural - Se distribuyen en diferentes capas para crear profundidad - Responden al scroll con un efecto parallax - Se adaptan automáticamente a diferentes tamaños de pantalla