CodePen Home Valentine's

Open In Editor Publish Your Code

<head>
  <meta charset="UTF-8">
  <title>Valentine's</title>
  <link rel="stylesheet" href="styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
  <style>
    .code-signature {
      position: fixed;
      bottom: 20px;
      right: 20px;
      font-family: 'Arial', sans-serif;
      color: rgba(255, 105, 180, 0.7);
      font-size: 1em;
      text-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
      letter-spacing: 2px;
      font-weight: bold;
      opacity: 0.8;
      transition: opacity 0.3s ease;
    }

.code-signature:hover {
      opacity: 1;
      text-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
    }
  </style>
</head>

<body>
  <div class="start-screen">
    <div class="title-container">
      <div class="title-wrapper">
        <h1 class="main-title">Valentine's</h1>
        <div class="title-overlay"></div>
      </div>
      <h2 class="sub-title">Amorous Symphony</h2>
      <button class="start-button" onclick="launchExperience()">
        <span class="button-text">❤ Start the Magic ❤</span>
        <div class="button-shine"></div>
      </button>
      <div class="floating-hearts">
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
        <div class="heart">♥</div>
      </div>
    </div>
    <div class="code-signature">CODE by zegarkidawida</div>
  </div>

<div class="scene">
    <div class="valentine-text">
      <div class="main-text">Happy Valentine's Day</div>
    </div>
  </div>
  <div class="loading-screen">Initializing Cosmic Love...</div>
  <script type="module" src="diamond-heart.js"></script>
</body>

</html>

CSS

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 8s ease-in-out;
}

.valentine-text {
  position: fixed;
  top: 20%;
  width: 100%;
  text-align: center;
  color: #ff69b4;
  text-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
  opacity: 0;
  transition: opacity 2s;
  z-index: 1000;
}

.main-text {
  font-family: "Great Vibes", cursive;
  font-size: 4em;
  margin-bottom: 0.2em;
}

.sub-text {
  font-size: 1.5em;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: #ff69b4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  font-family: "Great Vibes", cursive;
  z-index: 10000;
  transition: opacity 1s;
}

.start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(50, 0, 20, 0.95) 0%,
    rgba(20, 0, 30, 0.95) 70%,
    rgba(0, 0, 0, 0.95) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
  transition: opacity 1s;
  backdrop-filter: blur(10px);
}

.title-container {
  text-align: center;
  transform: translateY(-20%);
  position: relative;
  perspective: 1000px;
}

.title-wrapper {
  position: relative;
  display: inline-block;
}

.title-overlay {
  display: none;
}

.main-title {
  font-family: "Great Vibes", cursive;
  font-size: 5em;
  color: #ff69b4;
  text-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
  margin: 0;
  position: relative;
  perspective: 300px;
  transform-style: preserve-3d;
  transition: all 0.5s ease;
  animation: titleEntrance 2s cubic-bezier(0.19, 1, 0.22, 1) forwards,
    titleGlow 3s ease-in-out infinite alternate;
  transform-origin: center bottom;
  z-index: 2;
}

.main-title:hover {
  transform: rotateX(5deg) rotateY(10deg) translateZ(50px) scale(1.05);
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.5),
    0 0 20px rgba(255, 20, 147, 0.5), 0 0 30px rgba(255, 105, 180, 0.3);
}

.main-title::before {
  content: "Valentine's";
  position: absolute;
  top: -5px;
  left: -5px;
  color: transparent;
  background: linear-gradient(
    45deg,
    rgba(255, 105, 180, 0.2) 0%,
    rgba(255, 20, 147, 0.4) 50%,
    rgba(255, 105, 180, 0.2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  z-index: -1;
  filter: blur(10px);
  opacity: 0.5;
  transition: all 0.5s ease;
}

.main-title:hover::before {
  transform: translateZ(-10px);
  opacity: 0.7;
}

.sub-title {
  font-family: "Arial", sans-serif;
  font-size: 1.5em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin: 20px 0 40px;
}

.start-button {
  background: transparent;
  border: 2px solid #ff69b4;
  color: #ff69b4;
  padding: 15px 40px;
  font-size: 1.5em;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
  transform: translateY(20px);
  animation: buttonEntrance 1.5s 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.start-button:hover {
  background: rgba(255, 105, 180, 0.2);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.5),
    0 0 40px rgba(255, 20, 147, 0.3), inset 0 0 15px rgba(255, 105, 180, 0.3);
}

.start-button:hover::before {
  left: 100%;
}

.start-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.floating-hearts {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  animation: backgroundTwinkle 20s linear infinite;
  overflow: hidden;
  filter: blur(1px);
}

.heart {
  position: absolute;
  font-size: 1.5em;
  color: rgba(255, 105, 180, 0.6);
  opacity: 0;
  animation: float 12s linear infinite;
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
  will-change: transform;
}

.heart:nth-child(1) {
  left: 10%;
  top: 120%;
  animation-delay: 0s;
}
.heart:nth-child(2) {
  left: 30%;
  top: 130%;
  animation-delay: 1.2s;
}
.heart:nth-child(3) {
  left: 50%;
  top: 110%;
  animation-delay: 2.4s;
}
.heart:nth-child(4) {
  left: 70%;
  top: 140%;
  animation-delay: 3.6s;
}
.heart:nth-child(5) {
  left: 90%;
  top: 125%;
  animation-delay: 4.8s;
}
.heart:nth-child(6) {
  left: 20%;
  top: 135%;
  animation-delay: 6s;
}
.heart:nth-child(7) {
  left: 40%;
  top: 115%;
  animation-delay: 7.2s;
}
.heart:nth-child(8) {
  left: 60%;
  top: 145%;
  animation-delay: 8.4s;
}
.heart:nth-child(9) {
  left: 80%;
  top: 120%;
  animation-delay: 9.6s;
}
.heart:nth-child(10) {
  left: 15%;
  top: 130%;
  animation-delay: 10.8s;
}
.heart:nth-child(11) {
  left: 25%;
  top: 125%;
  animation-delay: 12s;
}
.heart:nth-child(12) {
  left: 55%;
  top: 135%;
  animation-delay: 13.2s;
}
.heart:nth-child(13) {
  left: 85%;
  top: 140%;
  animation-delay: 14.4s;
}
.heart:nth-child(14) {
  left: 35%;
  top: 145%;
  animation-delay: 15.6s;
}
.heart:nth-child(15) {
  left: 65%;
  top: 115%;
  animation-delay: 16.8s;
}
.heart:nth-child(16) {
  left: 5%;
  top: 125%;
  animation-delay: 18s;
}
.heart:nth-child(17) {
  left: 45%;
  top: 135%;
  animation-delay: 19.2s;
}
.heart:nth-child(18) {
  left: 75%;
  top: 130%;
  animation-delay: 20.4s;
}
.heart:nth-child(19) {
  left: 95%;
  top: 140%;
  animation-delay: 21.6s;
}
.heart:nth-child(20) {
  left: 25%;
  top: 120%;
  animation-delay: 22.8s;
}

.heart::before {
  content: "❀";
  position: absolute;
  opacity: 0.2;
  filter: blur(3px);
  transform: scale(1.3);
  color: rgba(255, 20, 147, 0.4);
}

@keyframes titleEntrance {
  0% {
    transform: translateY(100vh) rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}

@keyframes titleGlow {
  0%,
  100% {
    text-shadow: 0 0 30px rgba(255, 105, 180, 0.3),
      0 0 60px rgba(255, 50, 150, 0.2), 0 0 90px rgba(255, 0, 100, 0.1);
  }
  50% {
    text-shadow: 0 0 50px rgba(255, 105, 180, 0.6),
      0 0 100px rgba(255, 50, 150, 0.4), 0 0 150px rgba(255, 0, 100, 0.2);
  }
}

@keyframes buttonEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes backgroundTwinkle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}

@keyframes float {
  0% {
    transform: translateY(120%) translateX(-50%) scale(0);
    opacity: 0;
  }
  5% {
    opacity: 0.7;
    transform: translateY(100%) translateX(0%) scale(0.8);
  }
  95% {
    opacity: 0.4;
    transform: translateY(-20%) translateX(5%) scale(1.2);
  }
  100% {
    transform: translateY(-40%) translateX(10%) scale(1.5);
    opacity: 0;
  }
}

.crystal-overlay {
  display: none;
}

JS

import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js";
import { Howl, Howler } from "https://cdn.jsdelivr.net/npm/howler@2.2.3/+esm";

class DiamondHeart {
  constructor() {
    this.preloadShaderTextures();

this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    this.renderer = new THREE.WebGLRenderer({
      alpha: true,
      antialias: true,
      powerPreference: "high-performance"
    });

this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setClearColor(0x000000, 0);
    this.renderer.outputEncoding = THREE.sRGBEncoding;
    this.renderer.shadowMap.enabled = true;

const existingCanvas = document.querySelector(".scene canvas");
    if (existingCanvas) {
      existingCanvas.remove();
    }

document.querySelector(".scene").appendChild(this.renderer.domElement);

this.createHeart();
    this.createRings();
    this.setupLights();
    this.setupEnvironment();
    this.createDolphinPendant();
    this.createHeartPendant();

this.initParticles();
    this.initEventListeners();
    this.lastUpdate = Date.now();

this.initAudioReactivity();
    this.animate();
  }

async preloadShaderTextures() {
    const textureLoader = new THREE.TextureLoader();

try {
      this.particleTexture = await textureLoader.loadAsync(
        "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/textures/sprites/disc.png"
      );

console.log("Shader textures preloaded successfully");
    } catch (error) {
      console.error("Error preloading shader textures:", error);
    }
  }

createHeart() {
    const heartShape = new THREE.Shape();
    heartShape.moveTo(0, 0);
    heartShape.bezierCurveTo(0, 0, 0, -50, 50, -50);
    heartShape.bezierCurveTo(100, -50, 100, 0, 100, 0);
    heartShape.bezierCurveTo(100, 50, 50, 100, 0, 150);
    heartShape.bezierCurveTo(-50, 100, -100, 50, -100, 0);
    heartShape.bezierCurveTo(-100, -50, -50, -50, 0, 0);

const extrudeSettings = {
      depth: 35,
      bevelEnabled: true,
      bevelSegments: 20,
      steps: 7,
      bevelSize: 10,
      bevelThickness: 10
    };

const geometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings);

const material = new THREE.MeshPhysicalMaterial({
      color: new THREE.Color(0xff6666),
      transmission: 0.98,
      opacity: 1,
      reflectivity: 1,
      roughness: 0,
      metalness: 0.2,
      clearcoat: 1,
      clearcoatRoughness: 0,
      ior: 2.7,
      transparent: true,
      side: THREE.DoubleSide,
      emissive: new THREE.Color(0xff2222),
      emissiveIntensity: 0.05
    });

geometry.computeVertexNormals();

this.heart = new THREE.Mesh(geometry, material);
    this.heart.position.set(0, 0, -200);
    this.heart.rotation.x = Math.PI / 4;
    this.heart.castShadow = true;
    this.heart.receiveShadow = true;
    this.scene.add(this.heart);

this.camera.position.z = 500;
  }

createRings() {
    const outerRadius = 70;
    const innerRadius = 60;
    const ringHeight = 10;
    const chamferSize = 2;

const ringShape = new THREE.Shape();
    ringShape.moveTo(outerRadius, 0);
    ringShape.absarc(0, 0, outerRadius, 0, Math.PI * 2, false);

const holeShape = new THREE.Shape();
    holeShape.moveTo(innerRadius, 0);
    holeShape.absarc(0, 0, innerRadius, 0, Math.PI * 2, false);

ringShape.holes.push(holeShape);

const extrudeSettings = {
      depth: ringHeight,
      steps: 3,
      bevelEnabled: true,
      bevelSize: chamferSize,
      bevelThickness: chamferSize,
      bevelSegments: 10
    };

const ringGeometry = new THREE.ExtrudeGeometry(ringShape, extrudeSettings);

const ringMaterial = new THREE.MeshPhysicalMaterial({
      color: 0xffd700,
      metalness: 0.95,
      roughness: 0.05,
      clearcoat: 1,
      clearcoatRoughness: 0,
      reflectivity: 1,
      transmission: 0.05,
      opacity: 0.98,
      ior: 1.8,
      iridescence: 0.3,
      iridescenceIOR: 1.6,
      specularIntensity: 1,
      specularColor: new THREE.Color(0xffc125),
      side: THREE.DoubleSide
    });

this.rings = [];
    const orbitRadius = 220;
    const verticalSpread = 80;

for (let i = 0; i < 3; i++) {
      const ring = new THREE.Mesh(ringGeometry, ringMaterial);
      ring.position.set(
        Math.cos((i * Math.PI * 2) / 3) * orbitRadius,
        Math.sin((i * Math.PI * 2) / 3) * orbitRadius * 0.6,
        -200 + (i - 1) * verticalSpread
      );
      ring.rotation.x = Math.PI / 2;
      this.scene.add(ring);
      this.rings.push(ring);
    }
  }

setupLights() {
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
    this.scene.add(ambientLight);

const lights = [
      [1, 1, 1, 0xff4444],
      [-1, -1, -1, 0xffffff],
      [1, -1, 1, 0xff2222],
      [-1, 1, -1, 0xffffff]
    ];

lights.forEach(([x, y, z, color]) => {
      const light = new THREE.DirectionalLight(color, 0.7);
      light.position.set(x * 200, y * 200, z * 200);
      this.scene.add(light);
    });

const pointLight = new THREE.PointLight(0xff3333, 1.5, 700);
    pointLight.position.set(0, 0, 300);
    this.scene.add(pointLight);
  }

setupEnvironment() {
    const solidColor = new THREE.Color(0x4b0082);
    this.scene.background = solidColor;
    this.scene.environment = null;

this.renderer.toneMappingExposure = 1.3;
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
  }

createDolphinPendant() {
    const dolphinShape = new THREE.Shape();

dolphinShape.moveTo(0, 0);
    dolphinShape.quadraticCurveTo(-20, 10, -40, 20);
    dolphinShape.quadraticCurveTo(-60, 40, -50, 60);
    dolphinShape.quadraticCurveTo(-40, 80, -20, 70);
    dolphinShape.lineTo(0, 50);
    dolphinShape.lineTo(20, 70);
    dolphinShape.quadraticCurveTo(40, 80, 50, 60);
    dolphinShape.quadraticCurveTo(60, 40, 40, 20);
    dolphinShape.quadraticCurveTo(20, 10, 0, 0);

const extrudeSettings = {
      depth: 20,
      bevelEnabled: true,
      bevelSegments: 10,
      steps: 4,
      bevelSize: 5,
      bevelThickness: 5
    };

const geometry = new THREE.ExtrudeGeometry(dolphinShape, extrudeSettings);

const material = new THREE.MeshPhysicalMaterial({
      color: new THREE.Color(0x6a5acd),
      metalness: 1,
      roughness: 0.2,
      reflectivity: 1,
      clearcoat: 1,
      clearcoatRoughness: 0.1,
      transmission: 0.1,
      opacity: 0.95,
      ior: 1.7,
      iridescence: 1,
      iridescenceIOR: 1.5,
      specularIntensity: 1,
      specularColor: new THREE.Color(0x9370db),
      side: THREE.DoubleSide
    });

this.dolphinPendant = new THREE.Mesh(geometry, material);
    this.dolphinPendant.position.set(0, 0, -300);
    this.dolphinPendant.rotation.z = Math.PI / 2;
    this.dolphinPendant.scale.set(0.8, 0.8, 0.8);
    this.dolphinPendant.castShadow = true;
    this.scene.add(this.dolphinPendant);
  }

createHeartPendant() {
    const heartShape = new THREE.Shape();
    heartShape.moveTo(0, 0);
    heartShape.bezierCurveTo(0, 0, 0, -50, 50, -50);
    heartShape.bezierCurveTo(100, -50, 100, 0, 100, 0);
    heartShape.bezierCurveTo(100, 50, 50, 100, 0, 150);
    heartShape.bezierCurveTo(-50, 100, -100, 50, -100, 0);
    heartShape.bezierCurveTo(-100, -50, -50, -50, 0, 0);

const extrudeSettings = {
      depth: 20,
      bevelEnabled: true,
      bevelSegments: 10,
      steps: 4,
      bevelSize: 5,
      bevelThickness: 5
    };

const geometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings);

const material = new THREE.MeshPhysicalMaterial({
      color: new THREE.Color(0x8a4fff),
      metalness: 1,
      roughness: 0.15,
      reflectivity: 1,
      clearcoat: 1,
      clearcoatRoughness: 0.1,
      transmission: 0.1,
      opacity: 0.95,
      ior: 1.7,
      iridescence: 1,
      iridescenceIOR: 1.5,
      specularIntensity: 1,
      specularColor: new THREE.Color(0x7b68ee),
      side: THREE.DoubleSide
    });

this.heartPendant = new THREE.Mesh(geometry, material);
    this.heartPendant.position.set(0, 0, -300);
    this.heartPendant.rotation.z = Math.PI;
    this.heartPendant.scale.set(0.5, 0.5, 0.5);
    this.heartPendant.castShadow = true;
    this.scene.add(this.heartPendant);
  }

initParticles() {
    this.particles = [];
    const geometry = new THREE.BufferGeometry();
    const positions = [];
    const colors = [];
    const sizes = [];
    const velocities = [];

for (let i = 0; i < 10000; i++) {
      const radius = Math.random() * 1000;
      const theta = Math.random() * Math.PI * 2;
      const phi = Math.acos(Math.random() * 2 - 1);

const x = radius * Math.sin(phi) * Math.cos(theta);
      const y = radius * Math.sin(phi) * Math.sin(theta);
      const z = radius * Math.cos(phi);

positions.push(x, y, z);

const hue = Math.random();
      const saturation = 0.5 + Math.random() * 0.5;
      const lightness = 0.5 + Math.random() * 0.5;

colors.push(
        Math.cos(hue * Math.PI * 2) * 0.5 + 0.5,
        Math.cos(hue * Math.PI * 2 + 2) * 0.5 + 0.5,
        Math.cos(hue * Math.PI * 2 + 4) * 0.5 + 0.5
      );

sizes.push(1 + Math.random() * 3);

velocities.push(
        (Math.random() - 0.5) * 0.5,
        (Math.random() - 0.5) * 0.5,
        (Math.random() - 0.5) * 0.5
      );
    }

geometry.setAttribute(
      "position",
      new THREE.Float32BufferAttribute(positions, 3)
    );
    geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
    geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
    geometry.setAttribute(
      "velocity",
      new THREE.Float32BufferAttribute(velocities, 3)
    );

this.particleSystem = new THREE.Points(geometry, material);
    this.scene.add(this.particleSystem);
  }

initEventListeners() {
    document.addEventListener("mousemove", (e) => {
      const mouseX = (e.clientX / window.innerWidth) * 2 - 1;
      const mouseY = (e.clientY / window.innerHeight) * 2 - 1;
      this.heart.rotation.y = mouseX * 0.5;
      this.heart.rotation.x = mouseY * 0.3;
      this.camera.position.z = 500 + mouseY * 50;
      this.camera.position.x = mouseX * 50;
      this.camera.lookAt(this.heart.position);
    });
  }

initAudioReactivity() {
    this.sound = new Howl({
      src: [
        "https://www.amigaremix.com/listen/3595/tony_fluke73_wiren_-_planets_live_performance_-_amigaremix_03595.mp3"
      ],
      html5: true,
      pool: 1,
      onplay: () => {
        document.querySelector(".valentine-text").style.opacity = "1";
        document.querySelector(".loading-screen").style.opacity = "0";
      },
      onload: () => {
        document.querySelector(".loading-screen").style.opacity = "0";
      }
    });

this.analyser = Howler.ctx.createAnalyser();
    this.analyser.fftSize = 2048;
    Howler.masterGain.connect(this.analyser);
    this.audioData = new Uint8Array(this.analyser.frequencyBinCount);

this.energyHistory = new Array(30).fill(0.0001);
    this.beatCutoff = 0.25;
    this.beatThreshold = 1.4;
  }

getFrequencyEnergy(startBin, endBin) {
    return (
      Array.from(this.audioData.slice(startBin, endBin)).reduce(
        (acc, val) => acc + val / 255,
        0
      ) /
      (endBin - startBin)
    );
  }

detectBeat(energy, history) {
    const averageEnergy = history.reduce((a, b) => a + b) / history.length;
    const isBeat =
      energy > averageEnergy * this.beatThreshold && energy > this.beatCutoff;
    this.energyHistory = [...this.energyHistory.slice(1), energy];
    return isBeat;
  }

animate() {
    const now = Date.now();
    const delta = (now - this.lastUpdate) / 1000;
    this.lastUpdate = now;

if (this.analyser) {
      this.analyser.getByteFrequencyData(this.audioData);

const subBass = this.getFrequencyEnergy(0, 10);
      const bass = this.getFrequencyEnergy(10, 40);
      const lowMid = this.getFrequencyEnergy(40, 150);
      const mid = this.getFrequencyEnergy(150, 400);
      const highMid = this.getFrequencyEnergy(400, 900);
      const presence = this.getFrequencyEnergy(900, 1800);

const beat = this.detectBeat(subBass + bass, this.energyHistory);

const rotationIntensity = {
        heart: bass * 0.0005 + highMid * 0.0003,
        rings: mid * 0.001,
        dolphin: lowMid * 0.0007,
        heartPendant: presence * 0.0004
      };

this.heart.rotation.y += rotationIntensity.heart * (beat ? 1.5 : 1);
      this.heart.rotation.x += rotationIntensity.heart * 0.6 * (beat ? 1.2 : 1);
      this.heart.rotation.z += subBass * 0.0003 * Math.sin(now * 0.001);

this.rings.forEach((ring, i) => {
        const rhythmFactor = 1 + (beat ? mid * 0.02 : 0);
        ring.rotation.x += rotationIntensity.rings * rhythmFactor;
        ring.rotation.y +=
          rotationIntensity.rings * (i % 2 ? 0.8 : 1.2) * rhythmFactor;
        ring.rotation.z += highMid * 0.0002 * Math.cos(now * 0.0005 + i);
      });

if (this.dolphinPendant) {
        this.dolphinPendant.rotation.x +=
          rotationIntensity.dolphin * Math.sin(now * 0.0007);
        this.dolphinPendant.rotation.y +=
          rotationIntensity.dolphin * Math.cos(now * 0.0008);
        this.dolphinPendant.rotation.z +=
          lowMid * 0.0004 * Math.sin(now * 0.0006);
      }

if (this.heartPendant) {
        this.heartPendant.rotation.x +=
          rotationIntensity.heartPendant * Math.sin(now * 0.0009);
        this.heartPendant.rotation.y +=
          rotationIntensity.heartPendant * Math.cos(now * 0.001);
        this.heartPendant.rotation.z +=
          presence * 0.0003 * Math.sin(now * 0.0007);
      }

this.heart.material.color.setHSL(
        (Math.cos(now * 0.0007) * 0.05 + 0.9) % 1,
        0.7 + mid * 0.4,
        0.5 + presence * 0.3
      );

this.rings.forEach((ring, i) => {
        if (beat) {
          ring.scale.set(1.3, 1.3, 1.3);
        } else {
          ring.scale.lerp(new THREE.Vector3(1, 1, 1), 0.1);
        }
      });

const positions = this.particleSystem.geometry.attributes.position.array;
      for (let i = 0; i < positions.length; i += 3) {
        positions[i + 1] += Math.sin(now * 0.001 + i) * (presence * 0.7);
      }
      this.particleSystem.geometry.attributes.position.needsUpdate = true;

const baseScale = 1 + subBass * 0.4;
      const beatScale = beat ? 1.15 : 1;
      this.heart.scale.set(
        baseScale * beatScale,
        baseScale * beatScale,
        baseScale * beatScale
      );
    }

this.heart.rotation.y += 0.007;
    this.heart.rotation.x += 0.004;
    this.heart.rotation.z += 0.002;

const scale = 1 + Math.sin(Date.now() * 0.001) * 0.05;
    this.heart.scale.set(scale, scale, scale);

this.rings.forEach((ring, i) => {
      const angle = Date.now() * 0.0005 + (i * 2 * Math.PI) / 3;
      const orbitRadius = 220 + Math.sin(Date.now() * 0.001 + i) * 20;

ring.position.x = Math.cos(angle) * orbitRadius;
      ring.position.y = Math.sin(angle * 1.2) * (orbitRadius * 0.6);
      ring.position.z = -200 + (i - 1) * 80 + Math.cos(angle * 0.8) * 30;

// Maintain minimum distance between rings
      this.rings.forEach((otherRing, j) => {
        if (i !== j) {
          const distance = ring.position.distanceTo(otherRing.position);
          if (distance < 100) {
            const pushForce = (100 - distance) * 0.1;
            const direction = new THREE.Vector3()
              .subVectors(ring.position, otherRing.position)
              .normalize();
            ring.position.addScaledVector(direction, pushForce);
          }
        }
      });
    });

if (this.dolphinPendant) {
      const time = Date.now() * 0.0005;
      const orbitRadius = 350;

this.dolphinPendant.position.x = Math.cos(time) * orbitRadius;
      this.dolphinPendant.position.y =
        Math.sin(time * 1.5) * (orbitRadius * 0.4);
      this.dolphinPendant.position.z = -300 + Math.sin(time * 0.9) * 50;
    }

if (this.heartPendant) {
      const time = Date.now() * 0.0005 + Math.PI;
      const orbitRadius = 300;

this.heartPendant.position.x = Math.cos(time) * orbitRadius;
      this.heartPendant.position.y = Math.sin(time * 1.7) * (orbitRadius * 0.3);
      this.heartPendant.position.z = -250 + Math.cos(time * 1.1) * 60;
    }

if (Date.now() % 300 < delta * 1000) {
      this.createFloatingHeart();
    }

if (this.particleSystem) {
      this.particleSystem.material.uniforms.time.value = Date.now() * 0.001;
    }

const subBass = this.getFrequencyEnergy(0, 10);
    const bass = this.getFrequencyEnergy(10, 40);
    const musicEnergy = subBass + bass;

if (this.particleSystem) {
      this.particleSystem.material.uniforms.musicEnergy.value = musicEnergy;
    }

this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(() => this.animate());
  }

createFloatingHeart() {
    const heartGeometry = new THREE.SphereGeometry(2, 8, 8);
    const heartMaterial = new THREE.MeshBasicMaterial({
      color: new THREE.Color().setHSL(Math.random(), 0.7, 0.5),
      transparent: true,
      opacity: 0.7
    });

const heart = new THREE.Mesh(heartGeometry, heartMaterial);
    heart.position.set(
      (Math.random() - 0.5) * 100,
      (Math.random() - 0.5) * 100,
      -200
    );

this.scene.add(heart);

const speed = 0.1 + Math.random() * 0.2;
    const angle = Math.random() * Math.PI * 2;
    const radius = 50 + Math.random() * 100;

const animate = () => {
      heart.position.x += Math.cos(angle) * speed;
      heart.position.y += Math.sin(angle) * speed;
      heart.position.z += speed * 2;
      heart.scale.multiplyScalar(0.99);
      heart.material.opacity *= 0.99;

if (heart.material.opacity < 0.1) {
        this.scene.remove(heart);
        return;
      }
      requestAnimationFrame(animate);
    };
    animate();
  }
}

let resizeTimeout;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    new DiamondHeart();
  }, 250);
});

function launchExperience() {
  document.querySelector(".start-screen").style.opacity = "0";
  document.querySelector(".scene").style.opacity = "1";

document.body.style.cursor = "none";

const diamondHeart = new DiamondHeart();

diamondHeart.sound.play();

if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();
  }

setTimeout(() => {
    document.querySelector(".start-screen").remove();
  }, 1000);
}

window.launchExperience = launchExperience;

CodePen Home Valentine's

Recommended

Home Digital Clock

Glitch Effect Homepage: HTML, CSS, Tailwind

homepage for a portfolio site

HTML

CSS

JS

Recommended

Home Digital Clock

Glitch Effect Homepage: HTML, CSS, Tailwind

homepage for a portfolio site

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS