Motion poster

A looping poster where every element is a track on one seekable timeline.

useTimeline

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { useTimeline } from '@kkwaenggwari/animated';
import './styles.css';

const bars = [0.35, 0.8, 0.55, 1, 0.7, 0.45, 0.9, 0.6];

export default function App({ duration = 4000, repeat = true }) {
  const poster = useTimeline(
    {
      open: { values: [0, 1, 1, 0], times: [0, 0.3, 0.8, 1] },
      spin: ['0deg', '180deg', '360deg'],
      ring: { values: [0.4, 1], at: duration * 0.2, duration: duration * 0.4 },
      title: { values: ['40px', '0px'], at: duration * 0.45, duration: duration * 0.3 },
      fade: { values: [0, 1], at: duration * 0.45, duration: duration * 0.3 },
    },
    { duration, repeat: repeat ? Infinity : 0, repeatDelay: 600 },
    [duration, repeat],
  );
  const { open, spin, ring, title, fade } = poster.values;

  return (
    <div className="stage">
      <div className="poster">
        <span className="ring" style={{ transform: `rotate(${spin}) scale(${ring})` }} />
        <div className="bars">
          {bars.map((height, index) => (
            <i key={index} style={{ transform: `scaleY(calc(${open} * ${height}))` }} />
          ))}
        </div>
        <h2 style={{ opacity: fade, transform: `translateY(${title})` }}>Night Signal</h2>
      </div>
      <div className="player">
        <button type="button" onClick={() => poster.play()}>
          Play
        </button>
        <button type="button" onClick={() => poster.reverse()}>
          Reverse
        </button>
        <button type="button" onClick={() => poster.pause()}>
          Pause
        </button>
        <span className="progress">
          <b style={{ transform: `scaleX(${poster.progress})` }} />
        </span>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.poster {
  position: relative;
  display: grid;
  place-items: center;
  height: 360px;
  border-radius: 20px;
  background: #0b1440;
  overflow: hidden;
}

.ring {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 18px solid #8fb0ff;
  border-right-color: #5c7cff;
  border-bottom-color: #2854ff;
  border-radius: 50%;
}

.bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
}

.bars i {
  width: 14px;
  height: 100%;
  border-radius: 7px;
  background: #fff;
  transform-origin: bottom;
}

.poster h2 {
  position: absolute;
  bottom: 28px;
  margin: 0;
  color: #fff;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.player button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #e4e6ef;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.progress {
  flex: 1;
  min-width: 120px;
  height: 8px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.progress b {
  display: block;
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

How it works

useTimeline defines named tracks with keyframes, start times and durations in milliseconds.
All tracks derive from one progress variable, so the whole poster writes one value per frame.
play, reverse and pause control the clock; the progress bar is the same value.

Motion poster

How it works

More examples

Search