fix: PSYOP now shows — separated from word class, TBF cinematic style
- PSYOP was broken because it shared .word class with conflicting animations - Now uses its own .psyop-word class with independent animation - TBF-style cinematic blur reveals (blur 20px -> 0, 1.2-1.4s durations) - Material Design easing cubic-bezier(0.4, 0, 0.2, 1) throughout - PSYOP sized at clamp(5rem, 18vw, 14rem) — massive on desktop - Bounce-settle keyframes on PSYOP (30%/50%/70%/85%/100% steps) - Logo and tagline are separate phases, both vertically centered Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
@@ -20,40 +20,40 @@ onMounted(() => {
|
||||
return
|
||||
}
|
||||
|
||||
// Phase 1: Logo draws in (0–1700ms)
|
||||
// Phase 1: Logo draws in
|
||||
requestAnimationFrame(() => {
|
||||
isAnimating.value = true
|
||||
})
|
||||
|
||||
// Phase 2: Logo fades out (1800ms)
|
||||
// Phase 2: Logo fades out
|
||||
setTimeout(() => {
|
||||
logoGone.value = true
|
||||
}, 1800)
|
||||
}, 1900)
|
||||
|
||||
// Phase 3: Tagline words slam in (2200ms)
|
||||
// Phase 3: Tagline words blur in
|
||||
setTimeout(() => {
|
||||
showTagline.value = true
|
||||
}, 2200)
|
||||
}, 2300)
|
||||
|
||||
// Phase 4: PSYOP lands (3200ms)
|
||||
// Phase 4: PSYOP slams in
|
||||
setTimeout(() => {
|
||||
showPsyop.value = true
|
||||
}, 3200)
|
||||
}, 3100)
|
||||
|
||||
// Phase 5: Fade out (4600ms)
|
||||
// Phase 5: Fade everything out
|
||||
setTimeout(() => {
|
||||
isFading.value = true
|
||||
}, 4600)
|
||||
}, 4800)
|
||||
|
||||
setTimeout(() => {
|
||||
emit('complete')
|
||||
}, 5100)
|
||||
}, 5400)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="splash-overlay" :class="{ 'splash-fade-out': isFading }">
|
||||
<!-- Logo phase -->
|
||||
<!-- Phase 1: Logo draws in centered -->
|
||||
<svg
|
||||
v-if="!logoGone"
|
||||
width="309"
|
||||
@@ -62,7 +62,6 @@ onMounted(() => {
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="splash-logo"
|
||||
:class="{ 'logo-exit': logoGone }"
|
||||
>
|
||||
<path class="logo-path" :class="{ animating: isAnimating }" style="--i: 0" d="M162.632 33.2121C163.232 32.2421 163.772 31.5121 163.912 30.5021L135.492 31.8321L122.392 32.4621L119.402 37.3121L112.622 47.5121L104.132 60.8621L98.9019 69.7521C98.6619 70.1621 98.8519 71.0821 98.9619 71.7221C99.2819 73.6221 96.2519 75.7121 94.4619 74.8021C93.9719 74.5521 93.1219 73.6421 92.6319 73.2221L93.0919 70.5921L95.4019 68.9721C101.212 58.7821 107.562 49.1821 113.992 39.3721C115.932 36.4121 116.642 35.8421 118.382 32.6921L107.602 33.1421C106.832 33.1721 105.662 34.4921 105.092 35.0021L93.2019 45.5121L88.3219 49.9921C83.1919 54.7021 79.0419 60.0821 74.3019 65.2421L69.0919 70.9121C68.6119 71.4321 67.3019 72.0121 66.6919 71.8521C66.0819 71.6921 65.1519 70.8321 64.5619 70.1221C64.1519 69.6221 64.9619 68.1621 65.5919 67.8621C67.6819 66.8721 69.1019 65.5921 70.6019 63.9421L77.3919 56.4521C84.8719 48.2021 93.0619 41.1021 101.802 33.5421L79.5719 34.3221L60.4419 35.1421L35.2419 36.4021C25.4019 36.8921 15.8619 37.5221 6.10188 39.2721C6.37188 39.9121 6.09188 41.1021 5.30188 41.3021C3.98188 41.6521 2.46188 41.7021 1.05188 41.3021C0.231881 41.0621 -0.268119 38.9721 0.151881 38.1721C2.80188 36.7521 14.1019 34.9321 16.9519 34.7521L51.0919 32.5921L61.3219 32.0921L75.6519 31.5021L105.632 30.2321L123.502 14.8521L127.712 11.2321L134.672 5.46214C137.862 2.82214 139.972 -1.68786 142.382 0.652144C142.912 1.17214 143.712 2.67214 143.162 3.25214C141.882 4.61214 140.752 5.73214 139.812 7.12214L135.402 13.6521L127.162 25.7721C126.322 27.0021 125.532 27.8621 125.042 29.2821L135.952 28.7421L157.692 27.8221L165.922 27.5521L170.822 19.0121L175.202 10.9721C175.672 10.1121 177.182 9.56214 177.952 9.70214C178.982 9.89214 180.102 11.4321 179.522 12.5221C179.082 13.3521 177.792 14.3221 177.342 15.0721L175.182 18.6321L170.062 27.3421L178.322 27.0621L230.682 25.7121L237.122 25.6121C238.832 25.5821 240.382 25.6121 242.032 25.5421L254.252 24.9721L268.542 23.8721C275.472 23.3421 280.512 23.1521 287.102 21.2221C288.122 20.9221 289.982 20.8921 290.732 21.3321C291.072 21.5221 291.502 22.5021 291.542 22.8621C291.592 23.3021 290.692 23.9621 290.222 24.0321L278.152 25.7921C269.252 27.0921 260.532 27.6521 251.462 27.9121L210.192 29.0921L180.442 29.9021L168.252 30.3221L153.402 54.2721C151.782 56.8821 150.262 59.0721 148.792 62.0521C151.352 60.3221 155.772 56.1821 158.492 54.4321L170.452 46.7321C171.992 45.7421 172.572 43.6721 175.132 44.9121C175.692 45.1821 176.842 45.6821 176.862 46.2821C176.962 49.4921 174.502 48.2021 168.652 51.8621C156.952 59.1821 154.642 61.9021 144.532 70.4221C143.702 71.1221 141.992 70.6021 141.372 69.9021C139.832 68.1321 142.502 66.4321 143.582 64.4721C145.602 60.8321 147.612 57.5021 149.792 53.9721L162.622 33.2121H162.632ZM111.132 29.9221L120.442 29.7121C124.772 23.9321 128.792 17.9721 132.782 11.4321C129.922 13.5521 127.422 15.7721 124.712 18.0821L118.862 23.0621L116.482 25.1321L111.132 29.9221Z" fill="currentColor" />
|
||||
<path class="logo-path" :class="{ animating: isAnimating }" style="--i: 1" d="M163.772 110.492C155.402 104.552 146.472 99.9124 137.042 95.7124L118.342 87.3824C117.392 86.9624 116.192 86.7024 115.042 86.3124L114.252 83.5724C115.732 82.1024 117.632 83.0524 122.442 82.7624L139.072 81.7524L161.582 80.9524L180.202 80.8524L207.362 80.4624L213.392 75.8924L218.322 71.9624L222.272 68.7724L221.162 67.3924C223.622 61.3724 225.872 55.2924 227.402 48.8524C228.292 45.0824 226.602 44.3824 227.932 43.1124C228.802 42.2824 229.932 42.1124 230.912 42.5124C231.632 42.8124 232.522 44.2224 232.262 45.1124L230.052 52.9224L226.872 62.7824C228.402 62.2824 229.282 61.1424 230.372 60.0024L232.752 57.5224C236.662 53.4324 251.712 39.6824 253.082 39.7424C254.112 39.7824 255.882 41.2324 255.882 42.2424C255.882 43.1924 254.512 44.0924 253.962 44.6024L227.682 68.7924L220.252 75.1724C218.262 76.8824 215.552 78.8524 213.822 80.7224C216.292 80.9124 219.352 80.7224 221.702 80.6224C228.882 80.3024 235.822 80.5424 243.012 80.5924L253.442 80.6624L258.962 80.8524L278.862 81.9924L292.332 83.1824C296.032 83.5124 299.632 84.0424 303.282 83.8024C304.272 83.7324 308.252 83.3024 308.152 85.9424C308.112 86.9524 307.082 88.0524 305.952 87.9424L284.122 85.7724L258.232 84.1324L230.192 83.7324L212.692 83.7024C211.472 83.7024 210.292 84.3924 209.322 85.2124C200.122 92.9624 191.302 100.852 182.932 109.472C180.382 112.092 177.872 114.402 175.572 117.172C174.492 118.482 173.822 120.672 171.402 119.932C171.402 119.932 165.642 111.832 163.762 110.492H163.772ZM165.982 108.462L171.362 112.892C171.762 113.222 172.492 113.752 172.892 113.652C173.292 113.552 174.062 113.122 174.412 112.782L204.192 83.6224L195.722 83.9124L182.092 84.0624L170.632 84.1724L147.362 84.9124L124.272 86.3624C124.812 87.1424 125.632 87.5524 126.522 87.9424L138.402 93.1724L145.712 96.5724C149.592 98.3724 163.172 106.152 165.972 108.462H165.982Z" fill="currentColor" />
|
||||
@@ -72,18 +71,18 @@ onMounted(() => {
|
||||
<path class="logo-path" :class="{ animating: isAnimating }" style="--i: 5" d="M189.921 51.7524C184.441 56.3024 180.001 61.3624 175.351 66.5424L172.661 69.5424C172.151 70.1124 171.031 70.6424 170.181 70.5524C169.551 70.4924 168.661 69.9524 168.321 69.5124C167.981 69.0724 168.111 67.9324 168.491 67.3624L175.621 56.7024L179.141 51.9724C181.891 48.2824 184.051 44.5524 186.211 40.3724C187.151 39.7624 188.831 40.6424 189.881 41.3024C190.281 41.5524 194.551 41.6324 196.871 43.1824L197.911 45.7624C197.311 47.0624 195.961 47.2324 194.921 47.7924C193.161 48.7324 191.621 50.3524 189.911 51.7724L189.921 51.7524ZM182.321 54.0124L190.771 46.3624C190.281 45.3424 188.511 45.4324 187.761 45.8424C187.201 46.1424 186.671 47.0824 186.161 47.8124L181.181 54.8824C181.911 55.3924 181.951 54.3624 182.321 54.0224V54.0124Z" fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
<!-- Tagline phase — replaces logo in center -->
|
||||
<div v-if="logoGone" class="tagline-block" :class="{ visible: showTagline }">
|
||||
<div class="tagline-line">
|
||||
<!-- Phase 2: Tagline replaces logo in center -->
|
||||
<div v-if="logoGone" class="tagline-container">
|
||||
<div class="tagline-line" :class="{ visible: showTagline }">
|
||||
<span class="word" style="--w: 0">Everything</span>
|
||||
<span class="word" style="--w: 1">you</span>
|
||||
<span class="word" style="--w: 2">love</span>
|
||||
<span class="word" style="--w: 3">is a</span>
|
||||
</div>
|
||||
<span
|
||||
class="word psyop"
|
||||
:class="{ landed: showPsyop }"
|
||||
>PSYOP</span>
|
||||
<div
|
||||
class="psyop-word"
|
||||
:class="{ visible: showPsyop }"
|
||||
>PSYOP</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -97,7 +96,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-primary);
|
||||
transition: opacity 500ms ease;
|
||||
transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -106,7 +105,7 @@ onMounted(() => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Logo --- */
|
||||
/* --- Logo phase --- */
|
||||
.splash-logo {
|
||||
width: min(60vw, 340px);
|
||||
height: auto;
|
||||
@@ -135,14 +134,18 @@ onMounted(() => {
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* --- Tagline --- */
|
||||
.tagline-block {
|
||||
/* --- Tagline phase --- */
|
||||
.tagline-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 0 3vw;
|
||||
text-align: center;
|
||||
animation: containerFadeIn 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes containerFadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.tagline-line {
|
||||
@@ -155,88 +158,86 @@ onMounted(() => {
|
||||
|
||||
.word {
|
||||
font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
|
||||
font-size: clamp(1.8rem, 4.2vw, 4.5rem);
|
||||
font-weight: 400; /* Bebas Neue only has 400 but looks ultra bold */
|
||||
font-size: clamp(1.6rem, 4vw, 4.2rem);
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transform: translateY(50px) scaleY(1.3);
|
||||
filter: blur(10px);
|
||||
transform: translateY(30px);
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
.tagline-block.visible .word {
|
||||
animation: slamIn 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--w) * 120ms) forwards;
|
||||
.tagline-line.visible .word {
|
||||
animation: cinematicReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--w) * 150ms) forwards;
|
||||
}
|
||||
|
||||
@keyframes slamIn {
|
||||
@keyframes cinematicReveal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(50px) scaleY(1.3);
|
||||
filter: blur(10px);
|
||||
transform: translateY(30px);
|
||||
filter: blur(20px);
|
||||
}
|
||||
50% {
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px) scaleY(0.97);
|
||||
filter: blur(0);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(1px) scaleY(1.01);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scaleY(1);
|
||||
transform: translateY(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* PSYOP — italic serif, massive, Bitcoin orange */
|
||||
.psyop {
|
||||
font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
|
||||
/* --- PSYOP --- */
|
||||
.psyop-word {
|
||||
font-family: 'Playfair Display', 'Georgia', serif;
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
color: var(--accent);
|
||||
font-size: clamp(4rem, 13vw, 11rem);
|
||||
font-size: clamp(5rem, 18vw, 14rem);
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 0.9;
|
||||
margin-top: 0.05em;
|
||||
transform: translateY(80px) scale(1.4);
|
||||
filter: blur(16px);
|
||||
line-height: 0.85;
|
||||
text-transform: uppercase;
|
||||
margin-top: -0.02em;
|
||||
opacity: 0;
|
||||
transform: translateY(60px) scale(1.15);
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
.psyop.landed {
|
||||
animation: psyopSlam 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
.psyop-word.visible {
|
||||
animation: psyopCinematic 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes psyopSlam {
|
||||
@keyframes psyopCinematic {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(80px) scale(1.4);
|
||||
filter: blur(16px);
|
||||
transform: translateY(60px) scale(1.15);
|
||||
filter: blur(20px);
|
||||
}
|
||||
35% {
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
filter: blur(0);
|
||||
filter: blur(2px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(4px) scale(0.99);
|
||||
transform: translateY(-6px) scale(1.01);
|
||||
filter: blur(0);
|
||||
}
|
||||
65% {
|
||||
transform: translateY(-2px) scale(1.005);
|
||||
70% {
|
||||
transform: translateY(3px) scale(0.995);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(1px) scale(1.0);
|
||||
85% {
|
||||
transform: translateY(-1px) scale(1.002);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1.0);
|
||||
transform: translateY(0) scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet: 2 lines — "EVERYTHING YOU" / "LOVE IS A" */
|
||||
/* Tablet: 2 lines */
|
||||
@media (max-width: 900px) {
|
||||
.tagline-line {
|
||||
flex-wrap: wrap;
|
||||
@@ -245,15 +246,15 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.word {
|
||||
font-size: clamp(2rem, 7vw, 3.5rem);
|
||||
font-size: clamp(1.8rem, 6vw, 3rem);
|
||||
}
|
||||
|
||||
.psyop {
|
||||
font-size: clamp(3.5rem, 18vw, 7rem);
|
||||
.psyop-word {
|
||||
font-size: clamp(4rem, 20vw, 8rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: 4 lines — each word on its own line */
|
||||
/* Mobile: each word stacks */
|
||||
@media (max-width: 500px) {
|
||||
.tagline-line {
|
||||
flex-direction: column;
|
||||
@@ -261,30 +262,19 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.word {
|
||||
font-size: clamp(2.2rem, 13vw, 3.5rem);
|
||||
font-size: clamp(2rem, 11vw, 3rem);
|
||||
}
|
||||
|
||||
.psyop {
|
||||
font-size: clamp(3rem, 20vw, 5rem);
|
||||
.psyop-word {
|
||||
font-size: clamp(3.5rem, 22vw, 5.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.logo-path {
|
||||
clip-path: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.word,
|
||||
.psyop {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
filter: none;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.splash-overlay {
|
||||
transition: none;
|
||||
}
|
||||
.logo-path { clip-path: none; opacity: 1; }
|
||||
.word { opacity: 1; transform: none; filter: none; animation: none !important; }
|
||||
.psyop-word { opacity: 1; transform: none; filter: none; animation: none !important; }
|
||||
.tagline-container { animation: none; }
|
||||
.splash-overlay { transition: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user