Skater timeline

Animation of a skateboarder going from one end to another on a line, there is a title above

<div id="skateboarding-timeline-container">
    <style>
        #skateboarding-timeline-container {
            display: flex;

TIMELINE

100k STADIUM Site Title

Website logo that is animated, when on hover an underline rise up and colors are inverted.

<div id="stadium-logo" onclick="window.location.href='https://100kstadium.com/';">
  <span class="logo-text">100K</span>
  <div class="stadium-container">
    <span class="stadium-text">STADIUM</span>

Bait and switch redirection

Four stacked sentences that merge together when clicked, accompanied by an arrow animation.

<div class="ant-animated-container">
  <div class="ant-word-container">
    <div class="ant-word" data-hover="Ask Questions, Get Answers">Easy</div>
    <div class="ant-word" data-hover="Run it Quick">Simple</div>

Easy
Simple
Quick
Efficient

Icon informative hover

hover effect over a circular logo image triggers a rubber band animation and displays a tooltip with custom text.

<div class="custom-daw-hover-box">
  <style>
    .custom-daw-hover-box .image-container {
      position: relative;

DAW Icon
Generative AI is the worst it will ever be, so you better start using it. Picked Midjourney but I could've picked many more like glif or playground.
DAW Icon
You know those black terminals hackers use in movies? Well, it's that, but harder and more boring.

Two layers image box hover effect

Interactive image reveal effect where hovering over a circular image breaks it into small pixels that move away from the cursor, revealing a second image underneath.

<div id="custom-image-hover-effect" style="width: 100%; max-width: 600px; margin: 0 auto;">
  <div class="image-container" style="position: relative; width: 100%; padding-top: 100%; border-radius: 50%; overflow: hidden; border: 3px solid #fff200;">
    <img src="https://100kstadium.com/wp-content/uploads/2024/08/IMG_3259-e1701719628240.jpg" alt="Front Image" class="front-image" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2;">
    <img src="https://100kstadium.com/wp-content/uploads/2024/09/glif-retro-anime-anything-burlap-ta4lat1rqjxqhpcdpxa2hx7o.jpg" alt="Back Image" class="back-image" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">

Front Image Back Image