Code Motion — Creative Coding

Case 01

Capybara Tap-to-Earn Points

A TON mini-app where each tap updates an off-chain balance. Rewards stay readable during rapid input.

Why code

Code keeps timing, easing, and state logic testable in context and ready for development.

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 behavior rewards the tap, updates the balance, or guides the first interaction.

01Reward feedback

A reward appears at the tap point, then rises, scales, and fades for 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 small scale pop that preserves 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, then shifts down and fades after one interaction.

Y0 → +6px Opacity1 → 0 Duration300ms Easingease-out Triggerfirst tap

const guideMotion = {
  y: 6,
  duration: 300,
  easing: "ease-out"
};

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: "ease-out"
};

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

A finance livestream where reactions, comments, and danmaku create audience presence without obscuring the host.

Design summary

Local reactions add energy; five fixed danmaku lanes protect the host and keep messages readable.

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

Five motion behaviors keep the livestream active, legible, and focused on the host.

01Reactions

Heart and Gift rise, scale, and fade for quick tap feedback.

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

Five fixed lanes prevent danmaku collisions while sustaining 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 rise in gently, keeping the chat active and scannable.

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 count changes signal a current broadcast without distraction.

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

A small pop confirms the Follow state without shifting the layout.

TriggerTap / click Pop1 → 1.06 → 1 Duration220ms

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

Choose the feeling to change, then adjust its controlling parameter.

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: there is no single “correct” value; tune the parameter that controls the intended feeling.

Reflection

Coded motion works when each parameter maps to a product feeling and is tested in the full loop. Next, package reward and danmaku behaviours as reusable components with documented controls and reduced-motion presets.