With all the recent news about Rogue One, I wanted to pay a tribute to the Star Wars franchise. One interesting change I noticed in the new movie was a lack of scrolling introductory text before the beginning of the film. This sparked me to do research on the signature scrolling introduction used in Star Wars.
It turns out that this sequence is known thorughout the film industry as the “Star Wars opening crawl” and is widely regarded as one of the most effective and recognizable cinematic devices ever used. It appears in every numbered Star Wars movie (so every movie except for Rogue One) and has changed slightly over the years.
One interesting fact about the crawl is that when the original trilogy was filmed in the late 70’s, they didn’t generate this text with a computer; it was all done by hand. The production company actually printed all the text onto a 2’ by 6’ black sheet and filmed by hand very carefully to obtain the smooth scrolling effect.
Methodology
I decided that I wanted to recreate the classic effect using CSS and Javascript. I broke the crawl down into three steps: the introductory blue text, the logo, and the main body of text. Each step is animated by changing a different CSS property: opacity, dilation, and a vertical shift.
The entire sequence could be managed with a complex sequence of animation keyframes. However, I decided to save myself a headache and manage the animations using Javascript to edit individual CSS properties. This saved a lot of time and was much more compatible across browsers.
Luckily, there is already a lot of research and information about the opening crawls available online. I found information about the fonts and colors here. The text displayed was taken from Wookiepedia.
Perspective
The most difficult part of using CSS was in step three where the text looks as if it’s floating off into the distance. This turns out to be a case referred to in geometry as Single Point Perspective. Without diving too deep into specifics of projective geometry, the scene shown in the original crawl was a portion of a two-dimensional plane viewed from a point of observation somewhere in space.
This point of the observer is called the point of perspective. It turns out that if we assume the size of the object in the plane (just choosing an arbitrary font size, since it’s relative) then we can estimate the point of perspective. We can also find the angle of rotation of the plane by measurin the angle between the normal and the angle of the receding text. Using the chosen font size along with the point and angle that we found, we can reproduce almost exactly the effect of perspective from the original recording.
My Version
Disclaimers
This was a proof-of-concept production and I didn’t pay much attention to things like margins, angles, and kerning. Since the original version wasn’t made with a computer, these would never match exactly anyway. Also, if you’re not using Google Chrome, there’s a good chance that something might not look right.