Web Design

Welcome to my web design section, here you can find all my current design codes that you can copy and paste. Simply throw them into a html tester to get going!

ScrollTrigger Swords & Eyes

A scrollTrigger effect that animates swords as you scroll. This version also contains how to keyframe eyes (moving eye effect).

Fully customisable.

Parralax Hero

A parralax effect that animates as you scroll. This version is for 3 layers.

Fully customisable.

Split-Screen Scroll Trigger

A vertical scroll effect that animates only the right-side images. The left text stays in place.

Fully customizable and ready to copy/paste.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Split Screen Scroll Trigger</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: 'Arial', sans-serif;
      background: #0a0a0a;
      color: #fff;
    }

.spacer {
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      background: #764ba2;
    }

.pin-section {
      height: 400vh;
      position: relative;
    }

.pin-wrap {
      height: 100vh;
      display: flex;
      position: sticky;
      top: 0;
      overflow: hidden;
    }

.left-content {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 5rem;
      background: #1a1a1a;
    }

.left-content h1 {
      font-size: 4rem;
      margin-bottom: 2rem;
      line-height: 1.2;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

.left-content p {
      font-size: 1.25rem;
      line-height: 1.8;
      color: #b0b0b0;
      max-width: 500px;
    }

.right-content {
      width: 50%;
      position: relative;
      overflow: hidden;
    }

.image-container {
      height: 400%;
      display: flex;
      flex-direction: column;
    }

.image-slide {
      height: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      font-weight: bold;
      position: relative;
    }

.image-slide:nth-child(1) {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

.image-slide:nth-child(2) {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

.image-slide:nth-child(3) {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

.image-slide:nth-child(4) {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

.end-spacer {
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      background: #764ba2;
    }

@media (max-width: 768px) {
      .pin-wrap {
        flex-direction: column;
      }

.left-content, .right-content {
        width: 100%;
      }

.left-content {
        padding: 2rem;
        height: 40vh;
      }

.left-content h1 {
        font-size: 2.5rem;
      }

.left-content p {
        font-size: 1rem;
      }

.right-content {
        height: 60vh;
      }
      
    }
  </style>
</head>
<body>
  <div class="spacer">
    Scroll Down To Start
  </div>

<section class="pin-section">
    <div class="pin-wrap">
      <div class="left-content">
        <h1>el recap 2025</h1>
        <p>
          El reguetón es un género musical latinoamericano que surgió en Panamá y Puerto Rico en los años 80 y 90, fusionando ritmos de reggae, hip-hop y dancehall con elementos de la música caribeña.
        </p>
      </div>
<div class="right-content">
  <div class="image-container">
    <div class="image-slide">
      <img decoding="async" src="https://upload.wikimedia.org/wikipedia/commons/5/57/2023-11-16_Gala_de_los_Latin_Grammy%2C_15_%28cropped_2%29.jpg" alt="Grammy Gala" style="max-width:80%; max-height:80%; border-radius:1rem; box-shadow:0 8px 20px rgba(0,0,0,0.2);">
    </div>
    <div class="image-slide">
      <img decoding="async" src="https://upload.wikimedia.org/wikipedia/commons/5/54/YOUNG_MIKO_%28Vb6-eaqyUe0%29_%28cropped%29.png" alt="Young Miko" style="max-width:80%; max-height:80%; border-radius:1rem; box-shadow:0 8px 20px rgba(0,0,0,0.2);">
    </div>
    <div class="image-slide">
      <img decoding="async" src="https://upload.wikimedia.org/wikipedia/commons/0/06/Feid_2022_%28cropped%29.jpg" alt="Feid 2022" style="max-width:80%; max-height:80%; border-radius:1rem; box-shadow:0 8px 20px rgba(0,0,0,0.2);">
    </div>
    <div class="image-slide">
      <img decoding="async" src="https://upload.wikimedia.org/wikipedia/commons/a/af/Quevedo2023hh.jpg" alt="Quevedo 2023" style="max-width:80%; max-height:80%; border-radius:1rem; box-shadow:0 8px 20px rgba(0,0,0,0.2);">
    </div>
  </div>
</div>

</section>

<div class="end-spacer">
  For more follow
  <a href="https://www.instagram.com/ven.creates/" target="_blank" rel="noopener noreferrer">@ven.creates</a>
</div>

const imageContainer = document.querySelector('.image-container');
    const pinSection = document.querySelector('.pin-section');

gsap.to(imageContainer, {
      y: '-75%',
      ease: 'none',
      scrollTrigger: {
        trigger: pinSection,
        start: 'top top',
        end: 'bottom bottom',
        scrub: 1,
        pin: '.pin-wrap',
        anticipatePin: 1
      }
    });
  </script>
</body>
</html>

2000s-Style Website

A Y2K-inspired web design that captures the early 2000s aesthetic.

Fully customizable: copy the HTML to create your own retro-futuristic site or tweak colors and fonts to suit your style.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Enter the Matrix — Retro 2000s</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:"Courier New",monospace;background:#000;color:#bfffbf}

body{
  background-image:
    radial-gradient(ellipse at center,rgba(0,40,0,.2) 0%,rgba(0,0,0,.9) 60%),
    linear-gradient(180deg,rgba(0,10,0,.05) 0%,rgba(0,0,0,.9) 100%);
  background-attachment:fixed;
}
.matrix-lines::before{
  content:"";position:fixed;inset:0;
  background-image:
    repeating-linear-gradient(180deg,rgba(0,100,0,.02) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(90deg,rgba(0,80,0,.02) 0 1px,transparent 1px 140px);
  pointer-events:none;mix-blend-mode:screen;
}

.wrap{
  display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:start;
  max-width:1100px;margin:36px auto;padding:30px;position:relative;
  border:16px solid transparent;
  border-image:repeating-linear-gradient(45deg,#1d3d1d 0 8px,#0f1f0f 8px 16px,#294d29 16px 24px) 30;
  box-shadow:inset 0 0 12px rgba(0,255,100,.08),0 0 40px rgba(0,255,80,.15);
}

header{grid-column:1/-1;text-align:center;margin-bottom:6px}
h1{
  font-family:"Orbitron","Courier New",monospace;letter-spacing:1px;color:#e6ffe6;
  font-size:48px;text-shadow:0 0 10px rgba(0,255,100,.06);margin-bottom:6px;
}
.subtitle{color:#97ff8a;font-size:14px;opacity:.9;margin-bottom:12px}

.left{padding-right:20px;display:flex;gap:18px}
.info-box{
  border:2px solid #1ecc38;padding:18px;width:330px;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.65));
  box-shadow:0 0 18px rgba(30,255,80,.03),inset 0 0 12px rgba(0,0,0,.3);
  line-height:1.6;font-size:14px;color:#dfffe1;
}
.info-box p{margin-bottom:12px;text-align:left}

.choices{display:flex;flex-direction:column;gap:26px;padding-left:24px}
.choice{display:flex;align-items:center;gap:14px}
.choice input[type=radio]{
  appearance:none;width:26px;height:26px;border-radius:50%;
  border:3px solid #d6ffd6;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.06),transparent);
  cursor:pointer;outline:none;
}
.choice input[type=radio]:checked{
  box-shadow:0 0 8px rgba(30,255,100,.6),inset 0 -2px 6px rgba(0,0,0,.4);
  background:linear-gradient(180deg,#caffc2,#3ba53b);border-color:#6df56e;
}
.choice label{
  font-size:28px;color:#34ff6f;font-weight:bold;
  text-shadow:0 0 6px rgba(30,255,120,.06);cursor:pointer;
}

.right{position:relative;display:flex;justify-content:center}
.card{
  width:360px;height:460px;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.85));
  border:2px solid rgba(30,255,90,.15);
  box-shadow:0 10px 30px rgba(0,0,0,.8),0 0 30px rgba(30,255,90,.02);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.card img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:contrast(135%) saturate(65%);transition:opacity .15s;
}
.caption{
  position:absolute;left:-48px;top:50%;transform:translateY(-50%) rotate(-90deg);
  transform-origin:left top;font-size:22px;color:#eaffea;letter-spacing:2px;
  background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,40,0,.3));
  padding:8px 12px;border-left:2px solid rgba(0,255,100,.06);
  text-shadow:0 0 6px rgba(0,255,80,.06);transition:opacity .25s;
}

footer{
  grid-column:1/-1;margin:14px auto 36px;max-width:1100px;
  display:flex;justify-content:center;gap:18px;
  color:#84ff92;font-size:13px;opacity:.85;
}

@media(max-width:980px){
  .wrap{grid-template-columns:1fr;padding:18px;gap:18px}
  .left{flex-direction:column}
  .info-box{width:100%}
  .right .card{width:100%;height:420px}
  .caption{left:8px;bottom:-40px;top:auto;transform:rotate(0)}
}
</style>
</head>
<body class="matrix-lines">

<div class="wrap">
  <header>
    <h1>Enter the Matrix</h1>
    <div class="subtitle">In a world where reality is a simulation... (2000s fanpage)</div>
  </header>

<div class="left">
    <aside class="info-box" aria-label="description">
      <p>In a world where reality itself is a simulation, three figures lead the fight for freedom. Neo, portrayed by Keanu Reeves, is the reluctant hero who discovers his extraordinary potential and the power to shape the digital world.</p>
      <p>Trinity, brought to life by Carrie-Anne Moss, is a fierce and skilled fighter whose loyalty and courage make her indispensable to the resistance. Morpheus, played by Laurence Fishburne, is the wise and determined leader who guides Neo.</p>
      <p style="font-size:12px;opacity:.8">Tip: Pick a name to update the right-hand image</p>
    </aside>

<div class="choices" role="radiogroup" aria-label="characters">
      <div class="choice">
        <input id="opt-neo" name="char" type="radio" checked>
        <label for="opt-neo">NEO</label>
      </div>
      <div class="choice">
        <input id="opt-trinity" name="char" type="radio">
        <label for="opt-trinity">TRINITY</label>
      </div>
      <div class="choice">
        <input id="opt-morpheus" name="char" type="radio">
        <label for="opt-morpheus">MORPHEUS</label>
      </div>
    </div>
  </div>

<div class="right">
    <div class="card" id="imageCard">
      <img decoding="async" id="heroImg" src="https://upload.wikimedia.org/wikipedia/en/c/c6/NeoTheMatrix.jpg" alt="Character placeholder">
      <div class="caption" id="captionText">Morpheus</div>
    </div>
  </div>

<footer>
    <div>Designed in 2002 style • neon & monospaced</div>
  </footer>
</div>

const radios=document.querySelectorAll('input[name="char"]');
  const img=document.getElementById('heroImg');
  const caption=document.getElementById('captionText');

radios.forEach(r=>r.addEventListener('change',e=>{
    const data=mapping[e.target.id];
    img.style.opacity=0;caption.style.opacity=0;
    setTimeout(()=>{
      img.src=data.img;
      img.alt=data.caption+" placeholder";
      caption.textContent=data.caption;
      img.style.opacity=1;caption.style.opacity=1;
    },220);
  }));
})();
</script>
</body>
</html>

Multi-Card Scroll Trigger

A scroll-triggered animation featuring multiple cards that activate as you scroll.

Fully customizable and ready to copy/paste.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GSAP ScrollTrigger 4 Box Effect</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      background: #111;
      color: #fff;
      overflow-x: hidden;
    }
    header {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      background: linear-gradient(120deg, #e52d27, #b31217);
    }
    .scroll-section {
      height: 80vh;
      padding: 100px 0;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 60px;
    }
    .image {
      width: 300px;
      height: 300px;
      background: #444;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .image img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }
    footer {
      height: 100vh;
      background: linear-gradient(120deg, #e52d27, #b31217);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <div>Scroll down to see the animation 👇</div>
  </header>
  <section class="scroll-section">
    <div class="image"><img decoding="async" src="https://upload.wikimedia.org/wikipedia/en/5/5c/Mario_by_Shigehisa_Nakaue.png" alt="Mario"></div>
    <div class="image"><img decoding="async" src="https://upload.wikimedia.org/wikipedia/en/b/be/Luigi_by_Shigehisa_Nakaue.png" alt="Luigi"></div>
    <div class="image"><img decoding="async" src="https://upload.wikimedia.org/wikipedia/en/1/16/Princess_Peach_Stock_Art.png" alt="Princess Peach"></div>
  </section>
  <footer>
    <div>End of page 🚀</div>
  </footer>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);

const images = document.querySelectorAll('.image');

gsap.from(images, {
    opacity: 0,
    y: 100,
    stagger: 0.3,
    y: 750,
    x: 0,
    scrollTrigger: {
      trigger: ".scroll-section",
      start: "top top",     
      end: "+=600",         
      scrub: true,
      pin: true,            
      pinSpacing: true,     
      anticipatePin: 1,
      markers: true         // set FALSE to hide :)
    }
  });
  
    images.forEach(img => {
    img.addEventListener("mouseenter", () => {
      gsap.to(img, {
        scale: 1.08,
        boxShadow: "0 0 20px 6px rgba(255, 50, 0, 0.9), 0 0 30px 10px rgba(200, 0, 0, 0.7)",
        duration: 0.3,
        ease: "power2.out"
      });
    });

img.addEventListener("mouseleave", () => {
      gsap.to(img, {
        scale: 1,
        boxShadow: "0 0 0 0 rgba(0,0,0,0)",
        duration: 0.3,
        ease: "power2.inOut"
      });
    });
  });
</script>

</body>
</html>

3D Image Tilt

An interactive 3D tilt effect on images that responds to cursor movement.

Fully customizable with your own images and ready to copy/paste.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Cyberpunk Style Images</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: hsl(224, 32%, 12%);
      overflow: hidden;
    }

pre {
      width: 80vw;
      height: 80vh;
      border-radius: 1%;
      background: url("https://upload.wikimedia.org/wikipedia/en/9/9f/Cyberpunk_2077_box_art.jpg") no-repeat center/cover;
      position: relative;
      transform-style: preserve-3d;
      transform: perspective(1000px) rotateY(var(--rotateX, 0deg)) rotateX(var(--rotateY, 0deg));
      cursor: grab;
      transition: transform 0.1s ease-out;
    }

pre::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: 0 0 15px rgba(255,255,255,0.2);
      z-index: -1;
    }
  </style>
</head>
<body>
  <pre></pre>

document.addEventListener("mousemove", (e) => {
      const x = e.clientX;
      const y = e.clientY;

const middleX = window.innerWidth / 2;
      const middleY = window.innerHeight / 2;

const offsetX = ((x - middleX) / middleX) * 25; // tilt amount
      const offsetY = ((y - middleY) / middleY) * 25;

pre.style.setProperty("--rotateX", offsetX + "deg");
      pre.style.setProperty("--rotateY", -offsetY + "deg");
    });
  </script>
</body>
</html>

Two-Image Scroll Trigger

A scroll-triggered effect that animates two images as you scroll.

Fully customizable and ready to copy/paste.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GSAP 2 Image Scroll Animation</title>

.main-jv {
      min-height: 200vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4rem;
      padding: 100px 0;
    }

.row-jv {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      width: 100%;
      max-width: 1000px;
    }

.card-jv {
      width: 400px;
      height: 500px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
      will-change: transform, opacity;
    }

.card-jv img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

@media (max-width: 768px) {
      .row-jv {
        flex-direction: column;
      }

.card-jv {
        width: 80vw;
        height: 60vh;
      }
    }
  </style>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

const isMobile = window.innerWidth <= 768;
        const leftXValues = isMobile ? [0] : [-350];
        const rightXValues = isMobile ? [0] : [350];
        const leftRotationValues = isMobile ? [0] : [0];
        const rightRotationValues = isMobile ? [-0] : [-0];
        const yValues = isMobile ? [-200] : [-100];

gsap.utils.toArray(".row-jv").forEach((row, index) => {
          const cardLeft = row.querySelector(".card-left-jv");
          const cardRight = row.querySelector(".card-right-jv");

// LEFT ORC CARD
          gsap.fromTo(cardLeft,
            { x: leftXValues[index], y: yValues[index], rotation: leftRotationValues[index], opacity: 0 },
            {
              x: 0, y: 0, rotation: 0, opacity: 1,
              scrollTrigger: {
                trigger: ".main-jv",
                start: "top 95%",
                end: "70% bottom",
                scrub: true,
                onUpdate: (self) => {
                  const progress = self.progress;
                  gsap.set(cardLeft, {
                    x: leftXValues[index] - (progress * leftXValues[index]),
                    y: yValues[index] - (progress * yValues[index]),
                    rotation: leftRotationValues[index] - (progress * leftRotationValues[index]),
                    opacity: progress
                  });
                },
              },
            }
          );

// RIGHT CHAOS CARD
          gsap.fromTo(cardRight,
            { x: rightXValues[index], y: yValues[index], rotation: rightRotationValues[index], opacity: 0 },
            {
              x: 0, y: 0, rotation: 0, opacity: 1,
              scrollTrigger: {
                trigger: ".main-jv",
                start: "top 95%",
                end: "70% bottom",
                scrub: true,
                onUpdate: (self) => {
                  const progress = self.progress;
                  gsap.set(cardRight, {
                    x: rightXValues[index] - (progress * rightXValues[index]),
                    y: yValues[index] - (progress * yValues[index]),
                    rotation: rightRotationValues[index] - (progress * rightRotationValues[index]),
                    opacity: progress
                  });
                },
              },
            }
          );
        });
      } else {
        console.error("GSAP or ScrollTrigger not found.");
      }
    });
  </script>
</body>
</html>