Kyle's World

WELCOME TO

Loading

STATUS: CODING /// 001

STATUS: CODING

Kyle

Campos

Student at Covington High

Interests

Coding
Fashion
Trading

Daily Bible Verse

Website starter kit

Learn

Copy these starter patterns to add motion, polish, and interaction to your own website.

01 / Motion

Floating sparks

Create little particles that travel across the screen.

.spark {
  position: fixed;
  width: 3px;
  height: 3px;
  background: #00ff88;
  box-shadow: 0 0 12px #00ff88;
  animation: fly 4s linear forwards;
}

@keyframes fly {
  to { transform: translateX(100vw) translateY(-20px); }
}

02 / Loading

Loading screen

Give visitors a polished entrance while your page loads.

<div class="loader">
  LOADING...
</div>

.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #08090a;
  color: #00ff88;
  z-index: 10;
}

window.addEventListener("load", () => {
  document.querySelector(".loader").remove();
});

03 / Interaction

Clickable status

Let visitors change a message or theme with one click.

const status = document.querySelector(".status");

document.querySelector(".button")
  .addEventListener("click", () => {
    status.textContent = "STATUS: AWAKE";
    status.classList.add("is-active");
  });

Inspired by Bryce Maggio