Keith Clark
keithclark.co.uk · Personal blog · on HN since 2010
Keith Clark, a web developer, publishes CSS experiments such as a 3D engine, a first-person demo, and pure CSS parallax.
What HN saysHN commenters point to his CSS 3D FPS and parallax demos as early, clever work, and call him a clever guy.
38HN people shared it
20linked it in comments
18stories submitted
890story points
5 months agolast shared
2010people per year2026
Most-shared posts
- 1CSS-Powered 3D Engine (2014)10 people · 306 points · first shared 2019 · 67 comments on HN
- 2Pure CSS Parallax6 people · 7 points · first shared 2014 · discussion on HN
- 3Creating 3D worlds with HTML and CSS5 people · 391 points · first shared 2014 · 47 comments on HN
- 4A 3D environment with lighting, shadows built with CSS transforms4 people · 2 points · first shared 2014 · discussion on HN
- 5A grouped pure CSS parallax demo3 people · 129 points · first shared 2014 · 40 comments on HN
- 6Webkit renders your content blury if you translateZ or translateX2 people · 6 points · first shared 2015 · discussion on HN
- 7A 3D FPS engine using HTML5 and CSS3 3D transforms by Keith Clark2 people · 4 points · first shared 2013 · discussion on HN
- 8Nojs2 people · first shared 2014
- 9Loading CSS without blocking render1 people · 35 points · first shared 2015 · 7 comments on HN
- 103D FPS concept using HTML and CSS31 people · 6 points · first shared 2011 · discussion on HN
- 11Single Element Pure CSS Pie Charts (2018)1 people · 2 points · first shared 2023 · discussion on HN
- 12Responsive images using cookies (2011)1 people · 1 points · first shared 2014 · discussion on HN
- 13IE CSS3 pseudo selectors1 people · 1 points · first shared 2010 · discussion on HN
- 14Homepage1 people · first shared 2019
- 15Demo3 webkit overflow fix1 people · first shared 2026
What HN people wrote when they linked it
ElCapitanMarkla · 2019-02-25
Check out Keith's project's page - https://keithclark.co.uk/ - and his lastest js1k entry - https://keithclark.co.uk/articles/js1k-2019-flux/final/
He's a clever guy
pantelisk · 2026-06-20
And I think both have seen these much older handcrafted css3d engines
- https://pantel.is/projects/css3d/
- https://keithclark.co.uk/labs/css-fps/
but they took it to the next level :)
sheept · 2026-06-02
A parallax effect has also long been possible with CSS 3D transforms. Here's a demo,[0][1] from the same person who made that CSS 3D FPS a while ago.[2]
[0]: https://www.keithclark.co.uk/articles/pure-css-parallax-websites/demo3…
[1]: blog: https://www.keithclark.co.uk/articles/pure-css-parallax-websites/
[2]: https://www.keithclark.co.uk/labs/css-fps/
Someone · 2025-06-13
> Can you imagine rewriting a modern web browser engine to use GPU-accelerated text rendering?
It is tricky, but I thought they already (partly) do that. https://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ (2014):
“If an element is promoted to the GPU in current versions of Chrome, Safari or Opera then you lose subpixel antialiasing and text is rendered using the greyscale method”
So, what’s missing? Given that comment, at least part of the step from UTF-8 string to bitmap can be done on the GPU, can’t it?
yerich · 2024-03-23
Using pure CSS to make a 3D "game engine": https://keithclark.co.uk/labs/css-fps/
LoganDark · 2023-06-07
> when 3D elements are part of the HTML standard.
They already are. CSS Transforms can already be configured to happen in a full, proper 3D space.
Every polygon of this demo is an HTML element, and yet it is fully and completely three-dimensional: https://keithclark.co.uk/labs/css-fps/
One would just need a browser in VisionOS that supports displaying these elements in actual 3D rather than projected onto the 2D surface of the webpage...
s_severus · 2020-08-28
Very nice! Reminds me of the work of Keith Clark (https://keithclark.co.uk/labs/css-fps/)
I also experimented with 3d rendering with just CSS a few years ago. The result came out pretty nice (desktop only I'm afraid): https://www.michaelbromley.co.uk/experiments/css-space-shooter/
malkia · 2020-04-01
Also this -> https://keithclark.co.uk/labs/css-fps/ - 3D using CSS :)
rpastuszak · 2020-02-27
My first reaction when I saw the title was "oh, not this again", but this looks neat and the CSS source, surprisingly clean!
I really enjoyed the first attempts at 3d in CSS (in pre-canvas, WebGL times). Can't find the right example, but in a nutshell, the approach involved using border-width to create triangles, and thus triangle meshes.
You might like this one: https://keithclark.co.uk/labs/css-fps/desktop/
PyroLagus · 2019-09-23
> HTML and CSS are content, not software (they're not executables) - they're like DOC or PDF.
Well… https://keithclark.co.uk/labs/css-fps/
You could also argue that DOCs and PDFs are software.
lexicality · 2019-02-24
This is from 2013: https://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css…
I remember seeing his old one in 2012 and spending an 8 hour plane ride with a bottle of vodka and a laptop trying to recreate the windows maze screensaver the same way. (Needless to say, the vodka was the only winner)
mdadm · 2016-11-10
Some of these things are actually pretty cool IMO, like http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/ from https://github.com/you-dont-need/You-Dont-Need-Javascript#Parallax
Retr0spectrum · 2016-07-14
Here's an example of where CSS starts to become a bit more expensive:
http://www.keithclark.co.uk/labs/css-fps/nojs/
Edit: The site seems to be overloaded. Here's an archive:
https://web.archive.org/web/20160702222211/http://keithclark.co.uk/lab…
hellbanner · 2015-10-08
panzi · 2014-11-06
To me it looks like speed is one of the major advantages. JavaScript speed is only one thing. There is also render speed. E.g. this runs totally smoothly (with a bit of flickering (z order problems?)) in Chrome: http://keithclark.co.uk/labs/css-fps/nojs/
In Firefox it seems to have something between 1 and 5 fps and is totally glitched out.
JavaScript speed is not what needs to be worked on currently. Render speed is.
Kronopath · 2014-10-21
The associated article gives a good description of how this effect is achieved:
http://keithclark.co.uk/articles/pure-css-parallax-websites/
I find it interesting that parallax was initially a way to fake 3d-like effects, and now we're using 3d effects to implement parallax!
slacka · 2013-09-19
I was talking about HTML5 demos posted on HN. Like this one that DOES use CSS:
http://www.keithclark.co.uk/labs/css3-fps-new/
Granted, it's a terrible abuse of a CSS, but it's also a perfect example of how I'm supposed to be wowed by a buggy HTML5 demo my PC could render better in every way 15 years ago.
And no one has answered my question yet. What benefit does HTML5 bring me as a gamer? Why are HTML5 games better than native games in my steam library, especially considering DSL is my only option for Internet here?
chii · 2013-05-17
even tho its not pure css (some javascript is used to generate the html), this is a more impressive demo: http://www.keithclark.co.uk/labs/css3-fps/
iKlsR · 2020-03-06