Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/tile-mosaic/scene.html
HTML·109 lines·3 KB
7 --hg-bg: #0a0a0f;
8 --hg-fg: #f5f5fa;
9 --hg-dim: #6b6b78;
10 }
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16 .stage {
17 position: absolute;
18 inset: 0;
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 }
23 .mosaic {
24 position: relative;
25 display: grid;
26 grid-template-columns: repeat(6, 1fr);
27 grid-template-rows: repeat(4, 1fr);
28 gap: 6px;
29 width: 1440px;
30 height: 960px;
31 }
32 .tile {
33 border-radius: 4px;
34 will-change: transform, opacity;
35 }
36 .title {
37 position: absolute;
38 inset: 0;
39 display: flex;
40 align-items: center;
41 justify-content: center;
42 font-weight: 900;
43 font-size: 220px;
44 letter-spacing: -0.03em;
45 color: var(--hg-fg);
46 text-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
47 will-change: transform, opacity;
48 pointer-events: none;
49 }
50 </style>
51 <div class="stage">
52 <div class="mosaic" id="mosaic"></div>
53 <div class="title" id="title">MOSAIC</div>
54 </div>
55 <script>
56 window.__timelines = window.__timelines || {};
57 const tl = gsap.timeline({ paused: true });
58
59 const COLS = 6;
60 const ROWS = 4;
61 const STEP = 0.06;
62 // Deterministic palette; tile colour chosen by index, no randomness.
63 const PALETTE = [
64 "#7c3aed",
65 "#a855f7",
66 "#6d28d9",
67 "#c084fc",
68 "#5b21b6",
69 "#8b5cf6",
70 "#9333ea",
71 "#4c1d95",
72 ];
73
74 const mosaic = document.getElementById("mosaic");
75 const tiles = [];
76 for (let i = 0; i < COLS * ROWS; i++) {
77 const row = Math.floor(i / COLS);
78 const col = i % COLS;
79 const cell = document.createElement("div");
80 cell.className = "tile";
81 const a = PALETTE[(row + col) % PALETTE.length];
82 const b = PALETTE[(row + col + 3) % PALETTE.length];
83 cell.style.background = "linear-gradient(135deg, " + a + " 0%, " + b + " 100%)";
84 mosaic.appendChild(cell);
85 tiles.push({ el: cell, diag: row + col });
86 }
87
88 // Diagonal sweep: reveal order governed by (row + col), explicit per-tile timing.
89 for (const t of tiles) {
90 tl.fromTo(
91 t.el,
92 { autoAlpha: 0, scale: 0.6 },
93 { autoAlpha: 1, scale: 1, duration: 0.4, ease: "back.out(1.7)" },
94 t.diag * STEP,
95 );
96 }
97
98 // Title settles over the finished, dense mosaic.
99 tl.fromTo(
100 "#title",
101 { autoAlpha: 0, scale: 1.12 },
102 { autoAlpha: 1, scale: 1, duration: 0.45, ease: "power2.out" },
103 1.7,
104 );
105
106 window.__timelines["tile-mosaic"] = tl;
107 </script>
108 </div>
109</template>