# I am the Watcher. I am your guide through this vast new twtiverse.
# 
# Usage:
#     https://watcher.sour.is/api/plain/users              View list of users and latest twt date.
#     https://watcher.sour.is/api/plain/twt                View all twts.
#     https://watcher.sour.is/api/plain/mentions?uri=:uri  View all mentions for uri.
#     https://watcher.sour.is/api/plain/conv/:hash         View all twts for a conversation subject.
# 
# Options:
#     uri     Filter to show a specific users twts.
#     offset  Start index for quey.
#     limit   Count of items to return (going back in time).
# 
# twt range = 1 19
# self = https://watcher.sour.is/conv/ifngerq
Today at lunch break I made a small scene in 3D to help my colleague to understand how 3D worked in pure CSS for a personal project, here's the link.

WARNING: This page might cause motion sickness to some of you, open with care 🤗

https://sunetraalex.gitlab.io/3d-css-tunnel/
@justamoment That is immensely cool 😎 All in pure CSS? 😳
@justamoment That is immensely cool 😎 All in pure CSS? 😳
@justamoment That is immensely cool 😎 All in pure CSS? 😳
@justamoment That is immensely cool 😎 All in pure CSS? 😳
@justamoment That's awesome!
@justamoment That's really cool! My computer can't seem to handle it in full screen, though.
@justamoment Nice. (My machine is not fast enough to render this smoothly, though. 🥴)
@justamoment Nice. (My machine is not fast enough to render this smoothly, though. 🥴)
@justamoment Nice. (My machine is not fast enough to render this smoothly, though. 🥴)
@justamoment Nice. (My machine is not fast enough to render this smoothly, though. 🥴)
@justamoment Very cool!
I published the source for anyone wondering how it's made.

https://gitlab.com/sunetraalex/3d-css-tunnel

It is pure CSS and HTML, no JS or any libraries/frameworks.

The CSS for everything is, to my own surprise, shorter than expected, it's really easy to follow in my opinion.

Fell free to ask if anyone has any doubts or want more explanations! 😊
@justamoment that is really amazing! 😅
@justamoment that is really amazing! 😅
@justamoment that is really amazing! 😅
@justamoment that is really amazing! 😅
@justamoment Today I learned that there is a vmax unit.
Thanks you all!

@lyse Yes, they are units related to the viewport:

- vh Height
- vw Width
- vmin Shortest side
- vmax Longest side

Used together with font-size allows me to use em units as a percentage that scale dynamically on any screen, keeping proportion on everything (like the border-radius of the rings).

Using viewport units is simple with good support and let me avoid using less supported rules like aspect-ratio or hacks like the padding-bottom trick (both to make squares or rectangles without a specific size).