This project creates web versions of the title sequences from TV Shows and Movies. The aim is to improve my CSS and animation chops.
You can view all of the title sequences in this collection on codepen.
You can run the project locally as a mini-website. To run the project: clone the repo, install the dependencies with your package manager of choice, and run the dev server with dev npm script.
# using npm
npm i
npm run devThe website is run by default on: http://localhost:3000/.
So far, these are the title sequences:
- Schitts Creek
- Alien
- Better Call Saul
- Jackie Brown
- Killing Eve
- Ozark
- The Marvelous Mrs Maisel
- Upload
- Stranger Things
- Cocktail
- Orange Is The New Black
- North by Northwest
- The Fall Guy
- Arrested Developement
Schitt's Creek is a Canadian sitcom television series that aired from 2015 to 2020. The series follows the formerly wealthy Rose family's trials and tribulations.
View the codepen.
I created 2 versions:
- Using the Greensock (GSAP) library that features the soundtrack. See schitts-creek/gsap folder for code.
- A CSS version without the soundtrack. See schitts-creek/css folder for code.
You can read my notes for more info.
Alien is a 1979 science fiction horror film directed by Ridley Scott.
View the codepen.
It is a CSS animation. You can read my notes about the design and implementation.
Better Call Saul is an American crime drama television series.
View the codepen.
I used the Greensock (GSAP) library for the animation. You can read my notes for more details.
Jackie Brown is an American crime film written and directed by Quentin Tarantino.
View the codepen.
It is a CSS animation. You can read my notes about the design and implementation.
Killing Eve is a British spy thriller television series. The series follows Eve Polastri (Sandra Oh), a British intelligence investigator tasked with capturing psychopathic assassin Villanelle (Jodie Comer).
View the codepen.
I used the Greensock (GSAP) library for the animation. You can read my notes for more info.
Ozark is an American crime drama. The series follows Marty and Wendy Byrde, a married couple who move their family to the Lake of the Ozarks to create a big money laundering operation for a Mexican drug cartel.
This instance is based on Season 1 Episode 1.
View the codepen.
I used the Greensock (GSAP) library for the animation. You can read my notes for more info.
The Marvelous Mrs. Maisel is an American period comedy-drama television series. It is set in the late 1950s.
This instance is the opening title from Episode 2 of Season 4
View the codepen.
It is a CSS animation. You can read my notes for more info.
Upload is an American science fiction comedy-drama television series. The story takes place in 2033, when humans can "upload" themselves into a virtual afterlife of their choosing.
View the codepen.
It is a CSS animation. You can my notes for more info!
Stranger Things is an American science fiction horror drama television series.
View the codepen.
I used the Greensock (GSAP) library for the animation. You can read my notes for more info!
Cocktail is a 1988 American romantic comedy-drama film starring Tom Cruise.
View the codepen.
This is a CSS animation. You can read my notes on the implementation.
Orange Is the New Black is an American comedy-drama television series.
I took the final sequence in the opening title.
View the codepen.
The animation is a CSS animation, but uses JavaScript to toggle a class to trigger the animation.
- The original typeface is Damaged Guts. I chose a free alternative called CF Punk Fashion as a basis for making my own text. I converted the text to SVG paths and added more "damage" to get closer to the look of the original!
- I chose to do the animation in CSS, but have it triggered by JavaScript. I did begin by using GSAP and noticed that the equivalent of
translateX(50%)didn't work as expected. It works as expected in CSS. I don't know why!
North by Northwest is a 1959 American spy thriller film produced and directed by Alfred Hitchcock,
View the codepen.
This is a CSS animation.
The Fall Guy is a 2024 American action comedy.
View the codepen.
This is a CSS animation.
Arrested Development is an American television satirical sitcom.
This is a CSS animation.
The font used in the title is probably FF Blur (commercial license). I used a free font called Distro Bold.
Pencil/marker stroke effect uses a turbulence SVG filter e.g. CSS Tricks pencil effect article.
All fonts used are free to use. Some are free only for personal use including:
- Fontdinerdotcom used for The Marvelous Mrs Maisel title,
- ITC Benguiat used for Stranger Things.
I have taken some clips from songs to accompany some of the titles. The songs are the property of the copyright holders. Samples are used here as a commentary of how well-chosen the songs are for the title sequence. It is deemed to be fair usage. No copyright infringement is intended. Here is a list of songs sampled:
- For Killing Eve:
- Xpectation by Unloved.
- Voodoo Voodoo by Etienne Daho.
- Killer Shangri-Lah by Pshycotic Beats.
- For Schitts Creek:
- Main Theme by Maribeth Solomon
- For Stranger Things:
- The theme song is by Kyle Dixon and Michael Stein.