Hey,
@keyframes ef-hero-in {
from { transform: translateY(110%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes ef-hero-out {
0% { transform: translateY(0); opacity: 1; }
18% { transform: translateY(6%); opacity: 1; }
100% { transform: translateY(-115%); opacity: 0; }
}
@keyframes ef-char-shout {
0% {
transform: translate(0, 0) scale(1);
animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1);
}
0.5556% { transform: translate(calc(0.180px + var(--ef-seed,0) * 0.120px), calc(-0.375% + var(--ef-seed,0) * -0.075%)) scale(calc(1 + 0.0163 + var(--ef-seed,0) * 0.0081)); animation-timing-function: cubic-bezier(0.14, 2.33, 0.24, 1); }
1.1111% { transform: translate(calc(-0.225px + var(--ef-seed,0) * -0.105px), calc(-0.075% + var(--ef-seed,0) * 0.105%)) scale(calc(1 + 0.0179 + var(--ef-seed,0) * 0.0065)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
1.6667% { transform: translate(calc(0.150px + var(--ef-seed,0) * -0.360px), calc(-1.050% + var(--ef-seed,0) * -0.150%)) scale(calc(1 + 0.0390 + var(--ef-seed,0) * 0.0163)); animation-timing-function: cubic-bezier(0.14, 2.33, 0.24, 1); }
2.2222% { transform: translate(calc(0.630px + var(--ef-seed,0) * 0.210px), calc(-0.210% + var(--ef-seed,0) * 0.294%)) scale(calc(1 + 0.0455 + var(--ef-seed,0) * 0.0273)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
2.7778% { transform: translate(calc(-0.867px + var(--ef-seed,0) * 0.510px), calc(-2.040% + var(--ef-seed,0) * -0.255%)) scale(calc(1 + 0.0718 + var(--ef-seed,0) * 0.0276)); animation-timing-function: cubic-bezier(0.14, 2.33, 0.24, 1); }
3.3333% { transform: translate(calc(0.570px + var(--ef-seed,0) * 0.570px), calc(-1.140% + var(--ef-seed,0) * 0.285%)) scale(calc(1 + 0.0679 + var(--ef-seed,0) * 0.0247)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
3.8889% { transform: translate(calc(-0.600px + var(--ef-seed,0) * -0.600px), calc(-0.600% + var(--ef-seed,0) * 0.600%)) scale(calc(1 + 0.0780 + var(--ef-seed,0) * 0.0260)); animation-timing-function: cubic-bezier(0.14, 2.33, 0.24, 1); }
4.4444% { transform: translate(calc(0.900px + var(--ef-seed,0) * -0.300px), calc(-2.100% + var(--ef-seed,0) * -0.300%)) scale(calc(1 + 0.0650 + var(--ef-seed,0) * 0.0325)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
5.0000% { transform: translate(calc(-0.420px + var(--ef-seed,0) * -0.600px), calc(-1.200% + var(--ef-seed,0) * 0.420%)) scale(calc(1 + 0.0845 + var(--ef-seed,0) * 0.0260)); animation-timing-function: cubic-bezier(0.14, 2.33, 0.24, 1); }
5.5556% { transform: translate(calc(0.720px + var(--ef-seed,0) * 0.420px), calc(-1.800% + var(--ef-seed,0) * -0.150%)) scale(calc(1 + 0.0650 + var(--ef-seed,0) * 0.0325)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
6.1111% { transform: translate(calc(-0.900px + var(--ef-seed,0) * 0.420px), calc(-0.900% + var(--ef-seed,0) * 0.420%)) scale(calc(1 + 0.0715 + var(--ef-seed,0) * 0.0260)); animation-timing-function: cubic-bezier(0.14, 2.33, 0.24, 1); }
6.6667% { transform: translate(calc(0.420px + var(--ef-seed,0) * -0.600px), calc(-2.100% + var(--ef-seed,0) * -0.300%)) scale(calc(1 + 0.0780 + var(--ef-seed,0) * 0.0325)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
7.2222% { transform: translate(calc(0.900px + var(--ef-seed,0) * 0.300px), calc(-0.600% + var(--ef-seed,0) * 0.300%)) scale(calc(1 + 0.0650 + var(--ef-seed,0) * 0.0390)); animation-timing-function: cubic-bezier(0.14, 2.33, 0.24, 1); }
7.7778% { transform: translate(calc(-0.720px + var(--ef-seed,0) * -0.420px), calc(-1.500% + var(--ef-seed,0) * 0.300%)) scale(calc(1 + 0.0715 + var(--ef-seed,0) * 0.0260)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
8.3333% { transform: translate(calc(0.600px + var(--ef-seed,0) * -0.420px), calc(-2.400% + var(--ef-seed,0) * -0.150%)) scale(calc(1 + 0.0780 + var(--ef-seed,0) * 0.0325)); animation-timing-function: cubic-bezier(0.14, 2.33, 0.24, 1); }
8.8889% { transform: translate(calc(-0.420px + var(--ef-seed,0) * -0.600px), calc(-0.900% + var(--ef-seed,0) * 0.420%)) scale(calc(1 + 0.0715 + var(--ef-seed,0) * 0.0260)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
9.4444% { transform: translate(calc(0.720px + var(--ef-seed,0) * 0.300px), calc(-1.800% + var(--ef-seed,0) * -0.300%)) scale(calc(1 + 0.0715 + var(--ef-seed,0) * 0.0325)); animation-timing-function: cubic-bezier(0.12, 2.5, 0.22, 1); }
10.0000% { transform: translate(calc(-0.600px + var(--ef-seed,0) * -0.420px), calc(-1.200% + var(--ef-seed,0) * 0.300%)) scale(calc(1 + 0.0650 + var(--ef-seed,0) * 0.0260)); animation-timing-function: linear; }
13% { transform: translate(0, 0) scale(1); animation-timing-function: linear; }
100% { transform: translate(0, 0) scale(1); }
}
.ef-hero-carousel ef-text-segment {
display: inline-block;
animation:
ef-char-shout
3900ms
calc(var(--ef-stagger-offset, 0ms))
linear both;
}
.ef-hero-carousel:not(:defined) > ef-timegroup {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
@keyframes ef-hero-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ef-hero-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ef-char-shout { 0%, 100% { transform: none; } }
}
ClaudeCursorCodexCopilotGeminimake me a video