<div class="title">
<section class="horizontal">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</section>
<section class="vertical">
<div style="--i: 1" class="vertical-line line"></div>
<div style="--i: 2" class="vertical-line line"></div>
<div style="--i: 3" class="vertical-line line"></div>
<div style="--i: 4" class="vertical-line line"></div>
<div style="--i: 5" class="vertical-line line"></div>
<div style="--i: 6" class="vertical-line line"></div>
<div style="--i: 7" class="vertical-line line"></div>
<div style="--i: 8" class="vertical-line line"></div>
<div style="--i: 9" class="vertical-line line"></div>
<div style="--i: 10" class="vertical-line line"></div>
<div style="--i: 11" class="vertical-line line"></div>
<div style="--i: 12" class="vertical-line line"></div>
<div style="--i: 13" class="vertical-line line"></div>
<div style="--i: 14" class="vertical-line line"></div>
<div style="--i: 15" class="vertical-line line"></div>
<div style="--i: 16" class="vertical-line line"></div>
<div style="--i: 17" class="vertical-line line"></div>
<div style="--i: 18" class="vertical-line line"></div>
<div style="--i: 19" class="vertical-line line"></div>
<div style="--i: 20" class="vertical-line line"></div>
<div style="--i: 21" class="vertical-line line"></div>
<div style="--i: 22" class="vertical-line line"></div>
<div style="--i: 23" class="vertical-line line"></div>
<div style="--i: 24" class="vertical-line line"></div>
<div style="--i: 25" class="vertical-line line"></div>
<div style="--i: 26" class="vertical-line line"></div>
<div style="--i: 27" class="vertical-line line"></div>
<div style="--i: 28" class="vertical-line line"></div>
<div style="--i: 29" class="vertical-line line"></div>
<div style="--i: 30" class="vertical-line line"></div>
<div style="--i: 31" class="vertical-line line"></div>
<div style="--i: 32" class="vertical-line line"></div>
<div style="--i: 33" class="vertical-line line"></div>
</section>
<div class="credit">CARY GRANT</div>
<div class="credit">EVA MARIE SAINT</div>
<div class="credit">in ALFRED HITCHCOCK'S</div>
<img
class="credit title-credit"
src="img/title.svg"
alt="north by northwest"
>
</div>
@font-face {
font-family: "Franklin Gothic";
src: url("./franklin-gothic.ttf");
}
:root {
--bg-color: rgba(0, 128, 0, 0.493);
--line-color: blue;
--line-thickness: 1px;
--horizontal-line-start: 4%;
--horizontal-gap-lg: 4.5%;
--horizontal-gap-sm: 1.5%;
--vertical-gap: 3%;
--font-size-md: clamp(1rem, 8dvw + 1.1rem, 12rem);
--font-size-sm: clamp(1rem, 6dvw + 0.6rem, 12rem);
--text-x-position: 50dvw;
--text-y-position-up: -30dvh;
--text-y-position-down: 130dvh;
--text-y-position-inview: clamp(40dvw, 10dvw + 18rem, 60dvw);
--credit-reveal-animation-duration: 1.25s;
--credit-reveal-beginning: 8s;
--credit-reveal-rest: 3s;
}
html {
width: 100%;
display: grid;
justify-content: center;
overflow: hidden;
}
body {
position: relative;
width: fit-content;
height: 100dvh;
perspective: 400px;
background-color: white;
}
.title {
position: relative;
top: 0;
width: 180vw;
aspect-ratio: 3 / 4;
transform: translate(0, -10dvw) rotateY(6deg) rotate(-28deg) skewX(-25deg);
transform-style: preserve-3d;
overflow: hidden;
background-color: var(--bg-color);
}
.credit {
position: absolute;
color: white;
opacity: 0;
font-size: var(--font-size-md);
font-family: "Franklin Gothic", sans-serif;
animation-name: introduce-credit, exit-credit-up;
animation-duration: var(--credit-reveal-animation-duration);
animation-delay: var(--credit-reveal-beginning),
calc(var(--credit-reveal-beginning) + var(--credit-reveal-rest));
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
div.credit:nth-of-type(1) {
translate: var(--text-x-position) var(--text-y-position-up);
animation-name: introduce-credit, exit-credit-down;
}
div.credit:nth-of-type(2) {
--credit-reveal-beginning: 11.5s;
translate: var(--text-x-position) var(--text-y-position-down);
font-size: var(--font-size-md);
}
div.credit:nth-of-type(3) {
--credit-reveal-beginning: 15.5s;
font-size: var(--font-size-sm);
translate: var(--text-x-position) var(--text-y-position-up);
animation-name: introduce-credit, exit-credit-down;
}
.title-credit {
--credit-reveal-beginning: 19.5s;
width: 50%;
top: -5%;
translate: var(--text-x-position) var(--text-y-position-down);
animation-name: introduce-credit, exit-credit-up;
}
@media screen and (min-width: 600px) {
:root {
--text-x-position: 60dvw;
--text-y-position-up: -25dvh;
--text-y-position-down: 225dvh;
--text-y-position-inview: clamp(60dvw, 27dvw + 26rem, 80dvw);
--font-size-md: clamp(1rem, 12dvw + 2.2rem, 12rem);
--font-size-sm: clamp(1rem, 9dvw + 1.2rem, 12rem);
--line-thickness: 2px;
}
.title {
width: 240vw;
transform: translate3d(0, -77dvw, -300px) rotateY(6deg) rotate(-28deg)
skewX(-25deg);
}
}
@media screen and (min-width: 800px) {
:root {
--text-y-position-up: -60dvh;
--text-y-position-down: 260dvh;
--text-y-position-inview: clamp(60dvw, 30dvw + 28rem, 80dvw);
}
body {
perspective: 380px;
}
.title {
transform: translate3d(0, -80dvw, -280px) rotateY(6deg) rotate(-28deg)
skewX(-25deg);
}
}
@media screen and (min-width: 900px) {
:root {
--text-x-position: 70dvw;
--text-y-position-up: -110dvh;
--text-y-position-down: 310dvh;
--text-y-position-inview: clamp(60dvw, 40dvw + 28rem, 80dvw);
}
body {
perspective: 360px;
}
.title {
transform: translate3d(0, -58dvw, -230px) rotateY(6deg) rotate(-28deg)
skewX(-25deg);
}
:root {
--line-thickness: 2px;
}
}
@media screen and (min-width: 1000px) {
:root {
--text-x-position: 80dvw;
}
body {
perspective: 340px;
}
}
@media screen and (min-width: 1100px) {
:root {
--text-x-position: 80dvw;
}
body {
perspective: 320px;
}
.title {
transform: translate3d(5dvw, -58dvw, -230px) rotateY(6deg) rotate(-28deg)
skewX(-25deg);
}
}
@media screen and (min-width: 1201px) {
:root {
--text-x-position: 9.5rem;
--text-y-position-up: -20rem;
--text-y-position-down: 90rem;
--text-y-position-inview: 25rem;
--font-size-md: 6rem;
--font-size-sm: 4.5rem;
}
html {
overflow: auto;
}
.title {
transform: translate3d(0, -5rem, -230px) rotateY(6deg) rotate(-28deg)
skewX(-25deg);
max-width: 1000px;
}
.title-credit {
width: 60%;
}
}
@keyframes introduce-credit {
1% {
opacity: 1;
}
to {
translate: var(--text-x-position) var(--text-y-position-inview);
opacity: 1;
}
}
@keyframes exit-credit-up {
0%,
99% {
opacity: 1;
}
to {
translate: var(--text-x-position) var(--text-y-position-up);
opacity: 0;
}
}
@keyframes exit-credit-down {
0%,
99% {
opacity: 1;
}
to {
translate: var(--text-x-position) var(--text-y-position-down);
opacity: 0;
}
}
.line {
position: absolute;
background-color: var(--line-color);
}
.horizontal {
& div {
width: 100%;
height: var(--line-thickness);
transform-origin: 100% 0;
transform: scaleX(0);
animation: grow 6s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
& div:nth-of-type(1) {
top: var(--horizontal-line-start);
animation-delay: 80ms;
}
& div:nth-of-type(2) {
top: calc(var(--horizontal-line-start) + var(--horizontal-gap-lg));
animation-delay: 80ms;
}
& div:nth-of-type(3) {
top: calc(
var(--horizontal-line-start) + var(--horizontal-gap-lg) +
var(--horizontal-gap-sm)
);
animation-delay: 150ms;
}
& div:nth-of-type(4) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 2) +
var(--horizontal-gap-sm)
);
animation-delay: -50ms;
}
& div:nth-of-type(5) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 3) +
var(--horizontal-gap-sm)
);
animation-delay: 180ms;
}
& div:nth-of-type(6) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 3) +
(var(--horizontal-gap-sm) * 2)
);
animation-delay: 140ms;
}
& div:nth-of-type(7) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 4) +
(var(--horizontal-gap-sm) * 2)
);
animation-delay: -50ms;
}
& div:nth-of-type(8) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 5) +
(var(--horizontal-gap-sm) * 2)
);
animation-delay: 200ms;
}
& div:nth-of-type(9) {
top: 31%;
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 5) +
(var(--horizontal-gap-sm) * 3)
);
animation-delay: -150ms;
}
& div:nth-of-type(10) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 6) +
(var(--horizontal-gap-sm) * 3)
);
animation-delay: -300ms;
}
& div:nth-of-type(11) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 7) +
(var(--horizontal-gap-sm) * 3)
);
animation-delay: 100ms;
}
& div:nth-of-type(12) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 7) +
(var(--horizontal-gap-sm) * 4)
);
animation-delay: -350ms;
}
& div:nth-of-type(13) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 8) +
(var(--horizontal-gap-sm) * 4)
);
animation-delay: -280ms;
}
& div:nth-of-type(14) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 9) +
(var(--horizontal-gap-sm) * 4)
);
animation-delay: -160ms;
}
& div:nth-of-type(15) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 9) +
(var(--horizontal-gap-sm) * 5)
);
animation-delay: -220ms;
}
& div:nth-of-type(16) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 10) +
(var(--horizontal-gap-sm) * 5)
);
}
& div:nth-of-type(17) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 11) +
(var(--horizontal-gap-sm) * 5)
);
animation-delay: -120ms;
}
& div:nth-of-type(18) {
top: calc(
var(--horizontal-line-start) + (var(--horizontal-gap-lg) * 11) +
(var(--horizontal-gap-sm) * 6)
);
animation-delay: -180ms;
}
}
@keyframes grow {
to {
transform: scaleX(1);
}
}
.vertical {
& .line {
height: 100%;
width: var(--line-thickness);
left: calc(var(--i, 1) * var(--vertical-gap));
background-color: var(--line-color);
transform-origin: 0 100%;
transform: scaleY(0);
animation: grow-vertical 6s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 2s;
}
& .line:nth-child(n + 16):nth-child(-n + 33) {
transform-origin: 0 0;
}
& .line:nth-child(1) {
translate: 0 10%;
}
& .line:nth-child(2) {
translate: 0 22%;
}
& .line:nth-child(3) {
translate: 0 15%;
}
& .line:nth-child(4) {
translate: 0 29%;
}
& .line:nth-child(5) {
translate: 0 3%;
}
& .line:nth-child(6) {
translate: 0 13%;
}
& .line:nth-child(7) {
translate: 0 6.5%;
}
& .line:nth-child(8) {
translate: 0 3%;
}
& .line:nth-child(9) {
translate: 0 4%;
}
& .line:nth-child(10) {
translate: 0 1%;
}
& .line:nth-child(11) {
translate: 0 32%;
}
& .line:nth-child(12) {
translate: 0 7.5%;
}
& .line:nth-child(13) {
translate: 0 15%;
}
& .line:nth-child(14) {
translate: 0 34%;
}
& .line:nth-child(15) {
translate: 0 5%;
}
& .line:nth-child(16) {
translate: 0 -11%;
}
& .line:nth-child(17) {
translate: 0 -8%;
}
& .line:nth-child(18) {
translate: 0 -10%;
}
& .line:nth-child(19) {
translate: 0 -22%;
}
& .line:nth-child(20) {
translate: 0 -35%;
}
& .line:nth-child(21) {
translate: 0 -9%;
}
& .line:nth-child(22) {
translate: 0 -3%;
}
& .line:nth-child(23) {
translate: 0 -23%;
}
& .line:nth-child(24) {
translate: 0 -6.5%;
}
& .line:nth-child(25) {
translate: 0 -3%;
}
& .line:nth-child(26) {
translate: 0 -19%;
}
& .line:nth-child(27) {
translate: 0 -5%;
}
& .line:nth-child(28) {
translate: 0 -32%;
}
& .line:nth-child(29) {
translate: 0 -10%;
}
& .line:nth-child(30) {
translate: 0 -50%;
}
& .line:nth-child(31) {
translate: 0 -14%;
}
& .line:nth-child(32) {
translate: 0 -40%;
}
& .line:nth-child(33) {
translate: 0 -2%;
}
}
@keyframes grow-vertical {
to {
translate: 0 0;
transform: scaleY(1);
}
}
A CSS animation of the title card for the movie North by Northwest (1959).
For a more immersive perspective, view on screen with a width of 1200 pixels or less.