Affiche animée

Une affiche en boucle où chaque élément est une piste d’une même timeline positionnable.

useTimeline

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

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;
}

Comment ça marche

useTimeline définit des pistes nommées avec des keyframes, des instants de départ et des durées en millisecondes.
Toutes les pistes dérivent d’une variable de progression : l’affiche entière écrit une valeur par image.
play, reverse et pause pilotent l’horloge ; la barre de progression est la même valeur.

Affiche animée

Comment ça marche

Plus d’exemples

Rechercher