
Star Wars opening crawl from 1977 in HTML/CSS/JS - TimPietrusky
http://codepen.io/TimPietrusky/pen/eHGfj
======
pyalot2
Ah my eyes, the aliasing.

If anybody's interested why there's aliasing it's important to know how CSS
transforms work. If you transform, the browser lifts the transformed rectangle
into its own layer and renders its content to a texture. Then, later, it is
composited with the page by blitting that texture with whatever transformation
was applied.

So CSS transforms are an application of texturing. And in texturing what you
do to avoid aliasing is mipmapping (you might also throw anisotropic filtering
on top). However as the texture holding the rect the browser rendered isn't
square power of two, some devices do not support mipmapping it. It is also
quite slow to generate the mipmap for a texture every frame.

So with CSS transforms not being able to utilize mipmapping --> aliasing.

Now, in particular mipmapping text (that's supposed to be sharp) isn't even
the best idea. It just gets blurry and looks unappealing (although that's
better with anisotropic filtering, but then, anisotropic filtering is also
expensive and not every device/GPU supports it).

~~~
TimPietrusky
So what do you suggest I should change?

Thanks in advance.

~~~
pyalot2
Well in CSS you can't do anything about it, that's just how the browser works.

If you'd be doing WebGL you can do some things like using square power of two
textures and enabling mipmapping and if available anisotropic filtering.

You can also do things like using signed distance field fonts or draw fonts by
rasterizing (in the fragment shader) the bezier curves, which can be made to
nicely anti-alias (using standard derivatives).

~~~
ghayes
Is this to say that CSS 3D transformations on text are bound to be aliased [in
similar circumstances]? Is there a suggestion to the spec such as a "mipmap
hint" that could (one day) be added to reduce this flaw without the need for
other technologies?

~~~
pyalot2
It's not just 3D transforms, a simple scale down will exhibit aliasing as
well.

There's no flag to control aliasing migitating strategies for CSS in the spec,
nor is there any discussion about it as far as I know.

~~~
capisce
We call this a leaky abstraction :)

------
jasonkester
Gotta preload that audio. Even 100ms of lag between the logo showing up and
the music starting is noticeable. Jarring even for (presumably) most of us,
who have seen that opening crawl dozens, hundreds, or possibly for children of
the 70s who went on to own laserdisc players in the 80s, thousands of times.

In any other context, you could safely pull off not preloading. But this
example is just too ingrained into people's minds.

~~~
TimPietrusky
Yeah I know and it's freaking me out. I already use the attribute
preload="auto" of the <audio>-element, but it's not enough.

Do you know any better ways to preload it?

~~~
mercer
I'm assuming there's an event for when the audio is loaded... maybe hook up
the animation to that?

~~~
kevincennis
canplaythrough

------
jensenbox
I wish I could see it - seems busted on Chrome 29.0.1547.65 - Crunchbang
Waldorf x64

Logo appears and fades out then nothing but music and blackness.

~~~
TimPietrusky
This sounds like 3D is turned off in your Chrome. Can you please check your
settings chrome://flags. Maybe "GPU compositing on all pages" is turned off ->
turn it on.

~~~
Arkeus
I have the same issue with no text after the logo. My "GPU compositing on all
pages" was set to the default, but after changing it to "enabled" I still see
no text. Version 31.0.1626.5 dev-m Aura SyzyASan

~~~
th0br0
After enabing and relaunching chrome the text now works for me. (31.0.1612.0),
what does chrome://gpu/ tell you?

------
lbenes
Back in 1994, my 486 had no issue rendering the Star Wars opening crawl in a
sweet game, Star Wars: TIE Fighter. Fast forward 20 years, and thanks to the
wonders of web, my computer can't even render it correctly. I get a blank
screen after the star wars logo. So much for progress.

[http://www.youtube.com/watch?v=IYks9ZfupZ0](http://www.youtube.com/watch?v=IYks9ZfupZ0)

~~~
mahesh_rm
To a tech naive eye, this CSS looks and sounds much better than the 486
version. If I had to show my granny my first pc (a ~20 kilos 486) playing the
game intro and a retina ipad rendering this css effect, she'd probably be
amazed by tech progress in these last 20 years. Further, I can't see how the
next 20 years may produce a greater improvement in this render than the past
20s. It's probably just that we can't fully appreciate progress from within..

~~~
nougatmachine
Actually, on my retina iPad this demo doesn't work at all. You hear the music,
but no visuals appear.

------
skriticos2
If I remember correctly, the crawl converged in a point at about 1/3 rd from
the top in the original while in this one it scrolls off the top of the screen
(at least in the default view). That's a pretty big oversight.

~~~
lucisferre
Increase the height of that space at the bottom it looks fine.

------
spmurrayzzz
I love the fact that the scrolling text is 'contenteditable="true"'. Fun to
keep typing during the animation. Very cool.

------
increment_i
It's missing the Episode IV: A New Hope part...what gives?

~~~
curiousdannii
No, not the remastered version! Nooooooo!

~~~
stormbrew
The subtitle was added to second run theatre prints. Long before the
remastering.

~~~
curiousdannii
True, but more people are likely to think of the subtitle as being canonical
due to repeated watchings on VHS or DVD than theatre reruns.

------
klausjensen
You can even edit the text as it scrolls, which is a pretty interesting
effect.

~~~
verbatim
I assume this is what caused the somewhat strange result of "starship" being
underlined as a misspelled word?

------
chewxy
There is also this one which I posted a few months ago:
[http://scotch.io/demos/star-wars-attack-of-the-
dom](http://scotch.io/demos/star-wars-attack-of-the-dom)

~~~
scotchio
Ha. This is something I made. It never generated as much traction as my Pure
CSS3 Lightsaber Checkboxes [1], but if you wait until the end of the crawl,
you can take lightsabers and swing them around and hit HTML elements. Pretty
neat demo, but, overall, completely useless.

The code's also on GitHub [2]. It uses HTML5, CSS3, and Box2dJS.

[1] [https://github.com/scotch-io/Pure-CSS3-Star-Wars-
Lightsaber-...](https://github.com/scotch-io/Pure-CSS3-Star-Wars-Lightsaber-
Checkboxes)

[2] [https://github.com/scotch-io/Star-Wars-Attack-of-the-
DOM](https://github.com/scotch-io/Star-Wars-Attack-of-the-DOM)

------
joshuak
You're doing it wrong.

[http://static03.mediaite.com/themarysue/uploads/2012/08/bts1...](http://static03.mediaite.com/themarysue/uploads/2012/08/bts1.jpg)

~~~
TimPietrusky
Oh yes, sorry :D

------
ydeft
A very creative mixture of nostalgia and modern web dev.

Thanks for sharing!

------
lelf
Is it really worth #1 on HN?

PS: telnet towel.blinkenlights.nl

------
stefcosma
Tim, you amaze me every time. Nice job! :)

~~~
TimPietrusky
Thanks Stefan :D

------
meerita
The logo maybe would be better with SVG, but I think that will not help
anyways for the antialiasing.

~~~
ygra
Is _is_ SVG. It's just your browser (I'm guessing Chrome) that chooses to
render it at a fixed size and then scale it up. It's perfectly crisp in IE and
Firefox, for example.

------
unreal37
Most of the code is actually to recreate the music. The scrolling of the text
is the easy part.

~~~
TimPietrusky
The tricky part was to sync the CSS animation with the HTML <audio>-element
sound (1:34 minutes long) with the help of JavaScript.

The scrolling itself is just a CSS "transform: perspective(300px)
rotateX(25deg)".

You can also edit the scrolled text because I added the contenteditable="true"
attribute to the titles.

------
ananth99
Nice work! :)

------
goggles99
Cool, but sadly to me this is almost a parody of how modern web dev innovation
HTML5/JS/CSS are so far behind the technology that actually exists in the
world today (this was originally created in 1977). Web standards are good, but
much faster and be far more "open" and expandable.

One suggestion. Don't just create a standard for (monopoly) ECMA Script,
instead - create a standard for a VM that other languages can compile bytecode
to. Create an API in this VM for graphics, video, audio, ETC. This may be self
defeating for these clowns, because JavaScript/CSS/HTML may be decimated in a
decade if they actually did this, but hey... One can hope.

Once Google firmly owns the browser (like Microsoft in the 2000s) one of two
things will happen. One they say to hell with the standards board and push
real innovation and opportunity for developers to innovate. Two, they will sit
and let it stagnate. Either way, the cycle is coming around again. Android
will own the market in a big way soon. Big opportunity is on the horizon and I
am getting my hopes up that there is a big shake up with "browser standards".
End the monopoly of lame markup, styling, and scripting (HTML/CSS/JS) in the
OS of the internet.

~~~
jacquesm
> Don't just create a standard for (monopoly) ECMA Script, instead - create a
> standard for a VM that other languages can compile bytecode to. Create an
> API in this VM for graphics, video, audio, ETC.

Please no. That's the opposite of where we should be going. _Less_ executable
code on the client, more powerful markup.

JavaScript was a huge mistake that we will likely have to live with for
decades, let's not compound it.

~~~
kaoD
Markup and JavaScript are orthogonal concepts.

~~~
jacquesm
Lots of concepts that are now part of HTML5 could only be done with Javascript
in earlier incarnations.

~~~
kaoD
Although you're right, they're still orthogonal concepts. Powerful markup does
not replace JavaScript for all use cases.

