Code Motion — Creative Coding

Case 01

Capybara Tap-to-Earn Points

Repeated taps update an off-chain balance; rewards stay readable without blocking input.

Why code

A 980ms late fade preserves stacked rewards while state updates immediately.

9:415G 100%

Capybara Tap mini app

Capy Points 2,345

Daily task 2 / 3 completed

Tap the capybara

Home

Tasks

Friends

Wallet

Implementation HTML + CSS + JS

Interaction breakdown

Each tap-to-earn behavior has one clear job: reward the tap, update the balance, and guide the first interaction.

01Reward feedback

Each tap creates a reward at the touch point, then lifts it upward with a soft scale change and fade for clear, immediate feedback.

Y0 → -56px Scale0.82 → 1 Opacity1 → 0 Duration1400ms Easingcubic-bezier(.22, 1, .36, 1)

const rewardMotion = {
  y: -56,
  duration: 1400,
  easing: "cubic-bezier(.22, 1, .36, 1)",
  startScale: 0.82
};

function animateReward(node) {
  const animation = node.animate(
    [
      {
        opacity: 1,
        transform:
          `translate(-50%, -50%) scale(${rewardMotion.startScale})`
      },
      {
        opacity: 1,
        transform:
          "translate(-50%, -50%) translateY(-18px) scale(1)",
        offset: .24
      },
      {
        opacity: 1,
        transform:
          "translate(-50%, -50%) translateY(-44px) scale(1)",
        offset: .72
      },
      {
        opacity: 0,
        transform:
          `translate(-50%, -50%) translateY(${rewardMotion.y}px) scale(1)`
      }
    ],
    {
      duration: rewardMotion.duration,
      easing: rewardMotion.easing,
      fill: "forwards"
    }
  );

  animation.finished.finally(() => node.remove());
}

02Balance update

The balance updates instantly, with a very small scale pop to confirm the value change without interrupting the tap rhythm.

Scale1 → 1.045 → 1 Duration180ms Easingcubic-bezier(.22, 1, .36, 1) Formattabular numerals

const balanceMotion = {
  duration: 180,
  easing: "cubic-bezier(.22, 1, .36, 1)",
  peakScale: 1.045
};

function updateBalance(value) {
  balanceValue.textContent =
    value.toLocaleString("en-US");

  balanceValue.animate(
    [
      { transform: "scale(1)" },
      {
        transform:
          `scale(${balanceMotion.peakScale})`,
        offset: .45
      },
      { transform: "scale(1)" }
    ],
    {
      duration: balanceMotion.duration,
      easing: balanceMotion.easing
    }
  );
}

03First-tap guide

The first-tap guide stays centered over the character, then moves slightly downward and fades away after the first interaction.

Y0 → +6px Opacity1 → 0 Duration300ms Easingcubic-bezier(.22, 1, .36, 1) Triggerfirst tap

const guideMotion = {
  y: 6,
  duration: 300,
  easing: "cubic-bezier(.22, 1, .36, 1)"
};

function dismissGuide() {
  const animation = guide.animate(
    [
      {
        opacity: 1,
        transform: "translate(-50%, -50%)"
      },
      {
        opacity: 0,
        transform:
          `translate(-50%, calc(-50% + ${guideMotion.y}px))`
      }
    ],
    {
      duration: guideMotion.duration,
      easing: guideMotion.easing,
      fill: "forwards"
    }
  );

  animation.finished.finally(() => {
    guide.hidden = true;
  });
}

<div class="game-area" id="rewardGameArea"></div>

.reward {
  position: absolute;
  z-index: 30;
  min-width: 88px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  color: #168fd2;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  box-shadow:
    0 10px 24px
    rgba(34,101,142,.18);
}
</style>

const rewardValues =
  [5, 10, 25, 50];

const rewardMotion = {
  y: -56,
  duration: 1400,
  easing:
    "cubic-bezier(.22, 1, .36, 1)",
  startScale: 0.82
};

const reduceMotion =
  matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

function animateReward(node) {
  if (reduceMotion) {
    node.animate(
      [
        { opacity: 1 },
        { opacity: 0 }
      ],
      {
        duration: 180,
        easing: "linear",
        fill: "forwards"
      }
    ).finished.finally(
      () => node.remove()
    );

return;
  }

const animation = node.animate(
    [
      {
        opacity: 1,
        transform:
          `translate(-50%, -50%) scale(${rewardMotion.startScale})`
      },
      {
        opacity: 1,
        transform:
          "translate(-50%, -50%) translateY(-18px) scale(1)",
        offset: .24
      },
      {
        opacity: 1,
        transform:
          "translate(-50%, -50%) translateY(-44px) scale(1)",
        offset: .72
      },
      {
        opacity: 0,
        transform:
          `translate(-50%, -50%) translateY(${rewardMotion.y}px) scale(1)`
      }
    ],
    {
      duration:
        rewardMotion.duration,
      easing:
        rewardMotion.easing,
      fill: "forwards"
    }
  );

animation.finished.finally(
    () => node.remove()
  );
}

rewardGameArea.addEventListener(
  "click",
  (event) => {
    const rect =
      rewardGameArea
        .getBoundingClientRect();

const amount =
      rewardValues[
        Math.floor(
          Math.random() *
          rewardValues.length
        )
      ];

const node =
      document.createElement("div");

node.className = "reward";
    node.textContent = `+${amount} Coins`;

node.style.left =
      `${event.clientX - rect.left}px`;

node.style.top =
      `${event.clientY - rect.top}px`;

rewardGameArea.appendChild(node);
    animateReward(node);
  }
);
</script>

<div class="balance-card">
  <span>Capy Points</span>
  <strong id="balanceValue">
    2,345
  </strong>
</div>

const balanceTapButton =
  document.querySelector(
    "#balanceTapButton"
  );

const rewardValues =
  [5, 10, 25, 50];

const balanceMotion = {
  duration: 180,
  easing:
    "cubic-bezier(.22, 1, .36, 1)",
  peakScale: 1.045
};

const reduceMotion =
  matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

let balance = 2345;

function updateBalance(value) {
  balanceValue.textContent =
    value.toLocaleString("en-US");

if (reduceMotion) return;

balanceValue.animate(
    [
      {
        transform: "scale(1)"
      },
      {
        transform:
          `scale(${balanceMotion.peakScale})`,
        offset: .45
      },
      {
        transform: "scale(1)"
      }
    ],
    {
      duration:
        balanceMotion.duration,
      easing:
        balanceMotion.easing
    }
  );
}

balanceTapButton.addEventListener(
  "click",
  () => {
    const amount =
      rewardValues[
        Math.floor(
          Math.random() *
          rewardValues.length
        )
      ];

balance += amount;
    updateBalance(balance);
  }
);
</script>

<div class="game-area" id="guideGameArea">
  <div class="guide" id="tapGuide">
    Tap the capybara
  </div>
</div>

.guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:
    translate(-50%, -50%);
  padding: 10px 14px;
  border:
    1px solid
    rgba(255,255,255,.62);
  border-radius: 999px;
  background:
    rgba(255,255,255,.58);
  color: #355b46;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(10px);
}
</style>

const tapGuide =
  document.querySelector(
    "#tapGuide"
  );

const guideMotion = {
  y: 6,
  duration: 300,
  easing: "cubic-bezier(.22, 1, .36, 1)"
};

const reduceMotion =
  matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

function dismissGuide() {
  if (tapGuide.hidden) return;

if (reduceMotion) {
    tapGuide.hidden = true;
    return;
  }

const animation =
    tapGuide.animate(
      [
        {
          opacity: 1,
          transform:
            "translate(-50%, -50%)"
        },
        {
          opacity: 0,
          transform:
            `translate(-50%, calc(-50% + ${guideMotion.y}px))`
        }
      ],
      {
        duration:
          guideMotion.duration,
        easing:
          guideMotion.easing,
        fill: "forwards"
      }
    );

animation.finished.finally(
    () => {
      tapGuide.hidden = true;
    }
  );
}

guideGameArea.addEventListener(
  "click",
  dismissGuide,
  { once: true }
);
</script>

Case 02

Live Stream Reaction

Reactions, comments, and danmaku create presence without covering the host.

Design summary

Local reactions add energy; five fixed danmaku lanes protect the host and reading rhythm.

Following Mira Markets

9:415G 100%

📈

MacroLens What changes if the Fed stays higher for longer?

₿

BlockDesk BTC breakout or just another liquidity sweep?

🏦

RatesWatch The 10Y move is the key signal today.

📊

EarningsCall Which sector has the cleanest setup into earnings?

React to the interview →

15.6K

2.3K

Ask about markets...

Implementation HTML + CSS + JS

FINANCE LIVE · 05 MOTION DETAILS

Motion direction

A small set of motion behaviors creates rhythm and hierarchy across the live experience, keeping the interface active without competing with the host.

01Reactions

Heart and Gift lift upward with a soft scale change and fade, giving every tap a quick, playful sense of acknowledgement.

Y0 → -185px Scale0.65 → 1 → 0.9 Duration1.9s Easingcubic-bezier(.22, 1, .36, 1)

const reactionMotion = {
  y: -185,
  duration: 1900,
  easing: "cubic-bezier(.22, 1, .36, 1)",
  scale: [0.65, 1, 0.9]
};

function animateReaction(node) {
  const animation = node.animate(
    [
      { opacity: 1, transform: "translate(-50%, -50%) scale(.65)" },
      { opacity: 1, transform: "translate(-50%, -74px) scale(1)", offset: .24 },
      { opacity: 0, transform: "translate(-50%, -235px) scale(.9)" }
    ],
    {
      duration: reactionMotion.duration,
      easing: reactionMotion.easing,
      fill: "forwards"
    }
  );

  animation.finished.finally(() => node.remove());
}

02Danmaku

Danmaku is distributed across separate lanes, so messages stay readable and never collide while still creating a steady sense of audience activity.

X0 → -620px Lanes5 · no overlap Speed94–128px/s Easinglinear Interval2.2s

const danmakuMotion = {
  lanes: 5,
  laneGap: 34,
  distance: 620,
  speed: [94, 128],
  releaseBuffer: 180
};

const laneBusyUntil =
  Array(danmakuMotion.lanes).fill(0);

function getFreeLane(now = performance.now()) {
  const free = [];

  laneBusyUntil.forEach((busyUntil, lane) => {
    if (busyUntil <= now) free.push(lane);
  });

  return free.length
    ? free[Math.floor(Math.random() * free.length)]
    : null;
}

function addDanmaku() {
  const now = performance.now();
  const lane = getFreeLane(now);

  // Skip instead of overlapping.
  if (lane === null) return;

  const speed =
    94 + Math.random() * (128 - 94);

  const duration =
    (danmakuMotion.distance / speed) * 1000;

  node.style.top =
    `${lane * danmakuMotion.laneGap}px`;

  laneBusyUntil[lane] =
    now + duration + danmakuMotion.releaseBuffer;

  animateDanmaku(node, duration);
}

03Live comments

New comments enter gently from below, making the conversation feel active while keeping the chat area calm and easy to scan.

Y7 → 0px Opacity0 → 1 Duration320ms Easingcubic-bezier(.22, 1, .36, 1)

const commentMotion = {
  y: 8,
  duration: 320,
  easing: "cubic-bezier(.22, 1, .36, 1)"
};

function animateCommentIn(node) {
  node.animate(
    [
      { opacity: 0, transform: `translateY(${commentMotion.y}px)` },
      { opacity: 1, transform: "translateY(0)" }
    ],
    {
      duration: commentMotion.duration,
      easing: commentMotion.easing,
      fill: "both"
    }
  );
}

04LIVE + viewers

A subtle LIVE pulse and small viewer-count changes make the broadcast feel current and active without becoming visually distracting.

Pulse1.25s Viewer range8,050–8,750 Update3.6s

const livePulseMotion = {
  duration: 1250,
  minScale: 0.72,
  minOpacity: 0.45
};

liveDot.animate(
  [
    { opacity: 1, transform: "scale(1)" },
    {
      opacity: livePulseMotion.minOpacity,
      transform: `scale(${livePulseMotion.minScale})`
    },
    { opacity: 1, transform: "scale(1)" }
  ],
  {
    duration: livePulseMotion.duration,
    easing: "ease-in-out",
    iterations: Infinity
  }
);

const reduceMotion =
  matchMedia("(prefers-reduced-motion: reduce)").matches;

05Follow state

The Follow button uses a small pop when the state changes, adding a clear sense of confirmation while keeping the layout stable.

TriggerTap / click Pop1 → 1.06 → 1 Duration220ms Easingcubic-bezier(.22, 1, .36, 1)

const followMotion = {
  duration: 220,
  easing: "cubic-bezier(.22, 1, .36, 1)"
};

function animateFollowButton(button) {
  button.animate(
    [
      { transform: "scale(1)" },
      { transform: "scale(1.06)", offset: .45 },
      { transform: "scale(1)" }
    ],
    {
      duration: followMotion.duration,
      easing: followMotion.easing
    }
  );
}

function toggleFollow() {
  following = !following;
  followButton.classList.toggle("following", following);
  followButton.textContent = following ? "Following" : "+ Follow";
  animateFollowButton(followButton);
}

<div class="reaction-stage" id="reactionStage">
  <button id="heartButton" type="button">♥</button>
  <button id="giftButton" type="button">🎁</button>
</div>

.floating-reaction {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .floating-reaction {
    animation: none;
  }
}
</style>

const reactionMotion = {
  y: -185,
  duration: 1900,
  easing: "cubic-bezier(.22, 1, .36, 1)",
  scale: [0.65, 1, 0.9]
};

function animateReaction(node) {
  const animation = node.animate(
    [
      {
        opacity: 1,
        transform: "translate(-50%, -50%) scale(.65)"
      },
      {
        opacity: 1,
        transform: "translate(-50%, -74px) scale(1)",
        offset: .24
      },
      {
        opacity: 0,
        transform: "translate(-50%, -235px) scale(.9)"
      }
    ],
    {
      duration: reactionMotion.duration,
      easing: reactionMotion.easing,
      fill: "forwards"
    }
  );

animation.finished.finally(() => node.remove());
}

function spawnReaction(button, symbol) {
  const stage = reactionStage.getBoundingClientRect();
  const rect = button.getBoundingClientRect();

const node = document.createElement("div");
  node.className = "floating-reaction";
  node.textContent = symbol;

node.style.left =
    `${rect.left - stage.left + rect.width / 2}px`;

node.style.top =
    `${rect.top - stage.top + rect.height / 2}px`;

reactionStage.appendChild(node);
  animateReaction(node);
}

heartButton.addEventListener("click", () => {
  spawnReaction(heartButton, "♥");
});

giftButton.addEventListener("click", () => {
  spawnReaction(giftButton, "🎁");
});
</script>

<div class="danmaku-stage">
  <div
    class="danmaku-layer"
    id="danmakuLayer"
  ></div>
</div>

.danmaku-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.danmaku {
  position: absolute;
  right: -260px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(19,16,27,.52);
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  animation: danmakuMove linear forwards;
}

@keyframes danmakuMove {
  from {
    transform: translateX(0);
  }

to {
    transform: translateX(-620px);
  }
}
</style>

const messages = [
  "What does CPI mean for rate cuts?",
  "BTC breakout or liquidity sweep?",
  "How are you positioned into earnings?",
  "What changes if DXY breaks higher?",
  "Watching the 10Y yield today",
  "Can you compare BTC vs tech beta?"
];

const danmakuMotion = {
  lanes: 5,
  laneGap: 34,
  distance: 620,
  speed: [94, 128],
  releaseBuffer: 180
};

// Each lane stores the earliest time it can be reused.
const laneBusyUntil =
  Array(danmakuMotion.lanes).fill(0);

function durationFromSpeed(distance, speed) {
  return (distance / speed) * 1000;
}

function getFreeLane(now = performance.now()) {
  const free = [];

laneBusyUntil.forEach((busyUntil, index) => {
    if (busyUntil <= now) {
      free.push(index);
    }
  });

if (!free.length) {
    return null;
  }

return free[
    Math.floor(Math.random() * free.length)
  ];
}

function addDanmaku() {
  const now = performance.now();
  const lane = getFreeLane(now);

// Important:
  // if every lane is occupied, skip this message.
  // This prevents any visual overlap.
  if (lane === null) return;

const node =
    document.createElement("div");

node.className = "danmaku";

node.textContent =
    messages[
      Math.floor(
        Math.random() * messages.length
      )
    ];

const speed =
    danmakuMotion.speed[0] +
    Math.random() *
    (danmakuMotion.speed[1] -
     danmakuMotion.speed[0]);

const duration =
    durationFromSpeed(
      danmakuMotion.distance,
      speed
    );

node.style.top =
    `${lane * danmakuMotion.laneGap}px`;

node.style.animationDuration =
    `${duration}ms`;

danmakuLayer.appendChild(node);

// Lock the lane until the message has exited.
  laneBusyUntil[lane] =
    now +
    duration +
    danmakuMotion.releaseBuffer;

node.addEventListener(
    "animationend",
    () => node.remove(),
    { once: true }
  );
}

setInterval(addDanmaku, 2200);
</script>

<div class="comments" id="comments"></div>

.comment {
  padding: 6px 8px;
  border-radius: 10px;
  color: #fff;
  background: rgba(13,11,18,.34);
  backdrop-filter: blur(8px);
}
</style>

const interviewComments = [
  "How many cuts is the market pricing now?",
  "What are the key BTC levels this week?",
  "Does the 10Y yield change your equity view?",
  "Which sector has the strongest earnings setup?"
];

const commentMotion = {
  y: 8,
  duration: 320,
  easing: "cubic-bezier(.22, 1, .36, 1)"
};

function addComment() {
  const node = document.createElement("div");
  node.className = "comment";

node.textContent =
    interviewComments[
      Math.floor(
        Math.random() *
        interviewComments.length
      )
    ];

comments.appendChild(node);

node.animate(
    [
      {
        opacity: 0,
        transform:
          `translateY(${commentMotion.y}px)`
      },
      {
        opacity: 1,
        transform: "translateY(0)"
      }
    ],
    {
      duration: commentMotion.duration,
      easing: commentMotion.easing,
      fill: "both"
    }
  );

while (comments.children.length > 4) {
    comments.firstElementChild.remove();
  }
}

setInterval(addComment, 4200);
</script>

<div class="live-meta">
  <span class="live-badge">LIVE <i id="liveDot"></i></span>
  <span id="viewerCount">8.4K</span>
</div>

.live-badge {
  padding: 6px 8px;
  border-radius: 8px;
  background: #ff3f65;
  font-size: 9px;
  font-weight: 800;
}

.live-badge i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: #fff;
}
</style>

const viewerCount =
  document.querySelector("#viewerCount");

const reduceMotion =
  matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

const livePulseMotion = {
  duration: 1250,
  minScale: 0.72,
  minOpacity: 0.45
};

if (!reduceMotion) {
  liveDot.animate(
    [
      {
        opacity: 1,
        transform: "scale(1)"
      },
      {
        opacity: livePulseMotion.minOpacity,
        transform:
          `scale(${livePulseMotion.minScale})`
      },
      {
        opacity: 1,
        transform: "scale(1)"
      }
    ],
    {
      duration: livePulseMotion.duration,
      easing: "ease-in-out",
      iterations: Infinity
    }
  );
}

let viewers = 8400;

function updateViewerCount() {
  viewers +=
    Math.floor(Math.random() * 41) - 14;

viewers =
    Math.max(
      8050,
      Math.min(8750, viewers)
    );

viewerCount.textContent =
    `${(viewers / 1000).toFixed(1)}K`;
}

setInterval(updateViewerCount, 3600);
</script>

<button
  class="follow"
  id="followButton"
  type="button"
>
  + Follow
</button>

.follow.following {
  background: rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.28);
}
</style>

let following = false;

const followMotion = {
  duration: 220,
  easing: "cubic-bezier(.22, 1, .36, 1)"
};

function animateFollowButton(button) {
  button.animate(
    [
      { transform: "scale(1)" },
      {
        transform: "scale(1.06)",
        offset: .45
      },
      { transform: "scale(1)" }
    ],
    {
      duration: followMotion.duration,
      easing: followMotion.easing
    }
  );
}

followButton.addEventListener(
  "click",
  () => {
    following = !following;

followButton.classList.toggle(
      "following",
      following
    );

followButton.textContent =
      following
        ? "Following"
        : "+ Follow";

animateFollowButton(followButton);
  }
);
</script>

Motion system · parameter map

Motion Tuning Guide

Adjust the parameter that controls the intended feeling.

Timing + fade

Faster / slower → adjust duration
Fade earlier / later → move the opacity keyframe

Distance + direction

Move farther / shorter → adjust translateX, translateY, or distance
Stronger / lighter feedback → adjust scale and distance

Motion character

Softer / sharper movement → adjust easing
More / less bounce → adjust scale, overshoot, or spring damping

Danmaku density

More / fewer messages → adjust interval
More / fewer rows → adjust lanes

Danmaku flow

Faster / slower messages → adjust speed
More message spacing → adjust laneGap and releaseBuffer

Reduced motion

Reduce intensity → shorten distance and remove large transforms
Preserve clarity → keep state changes visible without relying on movement

Design principle: tune one variable at a time, then test the full loop.

Reflection

Motion earns its place when each parameter clarifies state; next, package the reward and danmaku patterns with reduced-motion defaults.