Creating innovative digital experiences with cutting-edge technology and visionary design.
genstro technologies
Copyright © genstro technologies
genstro technologies
Copyright © genstro technologies
import * as THREE from 'three';
import { gsap } from 'gsap';
// Set up Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
// Create icosahedron geometry for the logo
const geometry = new THREE.IcosahedronGeometry(5, 0);
const edges = new THREE.EdgesGeometry(geometry);
const line = new THREE.LineSegments(
edges,
new THREE.LineBasicMaterial({ color: 0x00ffff, linewidth: 2 })
);
// Add glow effect
const glowMaterial = new THREE.ShaderMaterial({
uniforms: {
glowColor: { value: new THREE.Color(0xff2d8e) }
},
vertexShader: /* glsl */`
varying vec3 vNormal;
void main() {
vNormal = normalize(normalMatrix * normal);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: /* glsl */`
uniform vec3 glowColor;
varying vec3 vNormal;
void main() {
float intensity = pow(0.7 - dot(vNormal, vec3(0, 0, 1.0)), 4.0);
gl_FragColor = vec4(glowColor, 1.0) * intensity;
}
`,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
const glow = new THREE.Mesh(geometry, glowMaterial);
glow.scale.multiplyScalar(1.2);
scene.add(line);
scene.add(glow);
// Add particle background
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 1000;
// Particle setup code here...
// Position camera
camera.position.z = 15;
// Animation loop
function animate() {
requestAnimationFrame(animate);
line.rotation.x += 0.003;
line.rotation.y += 0.005;
glow.rotation.x += 0.003;
glow.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
// Trigger the transformation when user scrolls or after a set time
function transformToWebsite() {
// 1. Expand the logo
gsap.to(line.scale, {
x: 2,
y: 2,
z: 2,
duration: 1.5,
ease: "power2.inOut"
});
// 2. Rotate to face user
gsap.to(line.rotation, {
x: 0,
y: 0,
duration: 1.2,
ease: "back.out(1.7)",
delay: 0.5
});
// 3. Flatten and transform into website framework
gsap.to(line.scale, {
x: 10,
y: 6,
z: 0.1,
duration: 1.5,
delay: 1.7,
ease: "power3.inOut",
onComplete: revealContent
});
// 4. Fade in website content
function revealContent() {
document.querySelector('.website-content').style.opacity = 1;
document.querySelector('.three-js-container').style.opacity = 0.15;
// Animate in each section
gsap.from('.nav-item', {
y: -50,
opacity: 0,
stagger: 0.1,
duration: 0.8,
ease: "power1.out"
});
gsap.from('.hero-content', {
y: 100,
opacity: 0,
duration: 1.2,
ease: "power2.out"
});
// Continue with other section animations
}
}
// Trigger after 3 seconds or on scroll
setTimeout(transformToWebsite, 3000);