Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/datamosh-smear/scene.html
HTML·131 lines·3 KB
7 --hg-cyan: #2afff0;
8 --hg-magenta: #ff2a4a;
9 --hg-bg: #0a0a0f;
10 --hg-fg: #f5f5fa;
11 --hg-dim: #6b6b78;
12 }
13 * {
14 margin: 0;
15 padding: 0;
16 box-sizing: border-box;
17 }
18 .smear-stage {
19 position: absolute;
20 inset: 0;
21 display: flex;
22 align-items: center;
23 justify-content: center;
24 }
25 .smear-hero {
26 position: relative;
27 font-weight: 900;
28 font-size: 320px;
29 letter-spacing: -0.05em;
30 line-height: 0.95;
31 white-space: nowrap;
32 }
33 .smear-layer {
34 position: absolute;
35 top: 0;
36 left: 0;
37 mix-blend-mode: screen;
38 will-change: transform, opacity, filter;
39 }
40 .smear-layer.l1 {
41 color: #ff2a4a;
42 }
43 .smear-layer.l2 {
44 color: #2afff0;
45 }
46 .smear-layer.l3 {
47 color: #b56dff;
48 }
49 .smear-layer.l4 {
50 color: #ffd166;
51 }
52 .smear-layer.l5 {
53 color: #f5f5fa;
54 }
55 .spacer {
56 color: transparent;
57 }
58 .scan-noise {
59 position: absolute;
60 inset: 0;
61 background:
62 repeating-linear-gradient(
63 0deg,
64 rgba(255, 255, 255, 0) 0px,
65 rgba(255, 255, 255, 0) 2px,
66 rgba(255, 255, 255, 0.07) 3px
67 ),
68 repeating-linear-gradient(
69 90deg,
70 rgba(0, 0, 0, 0) 0px,
71 rgba(0, 0, 0, 0) 4px,
72 rgba(0, 0, 0, 0.15) 5px
73 );
74 opacity: 0;
75 will-change: opacity;
76 pointer-events: none;
77 mix-blend-mode: overlay;
78 }
79 </style>
80 <div class="smear-stage">
81 <div class="smear-hero">
82 <span class="spacer">SMEAR</span>
83 <span class="smear-layer l1">SMEAR</span>
84 <span class="smear-layer l2">SMEAR</span>
85 <span class="smear-layer l3">SMEAR</span>
86 <span class="smear-layer l4">SMEAR</span>
87 <span class="smear-layer l5">SMEAR</span>
88 </div>
89 </div>
90 <div class="scan-noise"></div>
91 <script>
92 window.__timelines = window.__timelines || {};
93 const tl = gsap.timeline({ paused: true });
94
95 // All layers start far right, stagger-lag in, then settle near center
96 const layers = [
97 ".smear-layer.l1",
98 ".smear-layer.l2",
99 ".smear-layer.l3",
100 ".smear-layer.l4",
101 ".smear-layer.l5",
102 ];
103
104 layers.forEach((sel, i) => {
105 tl.fromTo(
106 sel,
107 { x: 360, opacity: 0, filter: "blur(20px)" },
108 { x: 0, opacity: 0.85, filter: "blur(0px)", duration: 0.7, ease: "expo.out" },
109 0.2 + i * 0.08,
110 );
111 });
112
113 // Final settle: pull layers into proper offset
114 const finalX = [-6, -2, 0, 2, 4];
115 layers.forEach((sel, i) => {
116 tl.to(sel, { x: finalX[i], duration: 0.4, ease: "power2.out" }, 1.1);
117 });
118
119 // Scan noise pulses
120 tl.fromTo(
121 ".scan-noise",
122 { opacity: 0 },
123 { opacity: 1, duration: 0.06, ease: "steps(1)" },
124 0.2,
125 );
126 tl.to(".scan-noise", { opacity: 0.25, duration: 0.8, ease: "power2.out" }, 0.6);
127
128 window.__timelines["datamosh-smear"] = tl;
129 </script>
130 </div>
131</template>