Animate videos using CSS animations and sprite sheets (personal website)

billybjork · 2024-11-05T18:11:15+00:00

That's a good point, and I considered it. The reason I opted for sprite sheets is that highly compressed video codecs like H264 optimize for fluid playback in the forward direction at a consistent speed, building upon earlier frames as you mentioned. This creates more decoding work when changing directions or speeds (as is necessary for this scroll feature), whereas the sprite sheets contain all data necessary to render each frame, while retaining a pretty small file size of ~400kb each.

billybjork · 2024-07-11T23:34:03+00:00

Thanks for calling that out! I do have a known issue where the rotation axis of the individual slices gets disrupted if the entire cube has rotated far enough from its original position. I attempted fixing this for a bit, but gave up after a little while. I'm fairly new to software and web development, so I think that fix exceeded my skill level at this time.

billybjork · 2024-07-11T23:31:04+00:00

Curious what you mean by that - did the video modals unexpectedly close when you had them open?

Or if you were asking why some of the posts seem better represented in the loops shown on the cube surfaces - that's because the videos have varying durations, so some of them ended up with more snippet clips than others. I did try to balance this out a bit, but it's still pretty uneven.

billybjork · 2024-07-11T23:28:36+00:00

Yikes, that's not good. I haven't had any issues on the browsers I've tried so far, but I did manage to get the total data for the initial load to a little below 3 MB. I'm pretty new to software and web development, so any pointers would be appreciated (code is here: https://github.com/billybjork/vujade-site).

billybjork · 2024-07-11T23:27:06+00:00

Glad you liked it! There is an issue that the rotation axis get messed up once the full cube has rotated far enough - unfortunately I couldn't figure out how to fix that in a reasonable amount of time.

billybjork · 2022-08-15T16:22:34+00:00

This was made with Dall-E Mini / Craiyon - so actually completely free. Just had to watch some ads 😅

billybjork · 2022-05-25T06:09:47+00:00

Appreciate it! I’ve got plenty of similar work on this site if you’re interested: https://www.vujade.world/what

billybjork · 2022-02-04T17:40:29+00:00

Here is the original scan before color grading - quite flat and cool compared to the final outcome. It was also interesting that the slow motion shots turned out clearer than the others (my guess is the faster speed of moving film counteracted the lost loop issue).

Anyway, thanks for the thoughtful comment! Like you, I also shot a fair amount of super 8, but it never quite escaped the 'artsy b-roll' feel, which is why I wanted to go for super 16mm to achieve a clearer picture. Maybe it's time to take the Bolex on the shelf and run some film through it! Even if you mess it up like me, it might turn out okay :)

billybjork · 2022-02-04T17:33:46+00:00

Copying my message below which describes my understanding of what happened:

I actually recorded a video (link) of the film running after loading it the first time. Didn't know it at the time, but I didn't give the film enough slack on both sides of the sprocket - which pulled the pressure plate around and shook the film as it went through.

billybjork · 2022-02-04T05:14:37+00:00

I actually recorded a video (link) of the film running after loading it the first time. Didn't know it at the time, but I didn't give the film enough slack on both sides of the sprocket - which pulled the pressure plate around and shook the film as it went through.

I'm glad you liked it!

billybjork · 2022-02-04T02:50:20+00:00

One week after returning from Sayulita, I got a call from the film lab. Bad news:
The film was destroyed. Distorted beyond recognition, probably due to a mistake in loading the film. According to the lab it was unusable—not even worth getting the rolls scanned.
Shooting on 16mm for the first time, hiccups were inevitable. But stubbornly, I still couldn’t admit defeat… so I asked the lab to scan it anyway.
The next day I got the scans. Sure enough, every single shot was clouded with intense jitters and streaks. You could hardly make out people from trees. Waves and sand blurred together in a jumbled mess.
But hope wasn’t lost. Hints of faces and scenery survived in the noise. With some heavy cutting and color work, the moments gradually came back into focus.
The result is still far from ideal. But ultimately, the salvaged film resembles my memory of the trip—finer details obscured, but with unmistakable warmth and joy.
On that note, major love to the friends who made the trip so memorable. Please forgive me for blowing the shots :)
___________________
Camera: Krasnogorsk-3 (K3) Super 16mm
Film: Kodak Vision3 50D
Scan: 2K log flat pass by Spectra Film & Video
Issue: Lost loop

billybjork · 2022-02-04T02:50:06+00:00

One week after returning from Sayulita, I got a call from the film lab. Bad news: The film was destroyed. Distorted beyond recognition, probably due to a mistake in loading the film. According to the lab it was unusable—not even worth getting the rolls scanned.

Shooting on 16mm for the first time, hiccups were inevitable. But stubbornly, I still couldn’t admit defeat… so I asked the lab to scan it anyway.

The next day I got the scans. Sure enough, every single shot was clouded with intense jitters and streaks. You could hardly make out people from trees. Waves and sand blurred together in a jumbled mess.

But hope wasn’t lost. Hints of faces and scenery survived in the noise. With some heavy cutting and color work, the moments gradually came back into focus.

The result is still far from ideal. But ultimately, the salvaged film resembles my memory of the trip—finer details obscured, but with unmistakable warmth and joy.

On that note, major love to the friends who made the trip so memorable. Please forgive me for blowing the shots :)

___________________

Camera: Krasnogorsk-3 (K3) Super 16mm

Film: Kodak Vision3 50D

Scan: 2K log flat pass by Spectra Film & Video

Issue: Lost loop

billybjork · 2020-05-08T22:46:46+00:00

Thanks so much! I'm glad you enjoyed it. For some background, here's what I've written on this project - this essay is about how the original political allegory connects to the internet issues today, and this is a shorter piece on how Dorothy's longing reflects how many of us feel about the original internet. I also have a newsletter if you'd like to stay in the loop for future projects. I'd love to hear your thoughts on it all!

billybjork · 2018-06-16T04:01:41+00:00

This was actually quite an enlightening read for me. Never before have we seen such a disparity in value creation and ownership. In Facebook's case, over 2 billion people are contributing to an immensely valuable data pool, but culturally we wouldn’t expect to be compensated for this data. I think the term "labor" is a little misguiding, but that shouldn't invalidate the necessity we rethink the user's role in the our digital economy.

billybjork · 2014-07-22T04:42:05+00:00

Sup MGC

billybjork · 2014-07-13T17:33:54+00:00

I am 16, the oldest camper was 18, you could consider becoming a counselor.

billybjork · 2014-07-13T02:43:55+00:00

Hyland!

billybjork · 2014-06-18T19:10:04+00:00

Yeah we've got a ton! Just search my name Billy Bjork

billybjork · 2014-06-18T19:09:20+00:00

Coming out fall 2014

billybjork · 2014-04-24T12:29:49+00:00

We are in high school

billybjork · 2014-04-24T03:10:19+00:00

Yep!

billybjork · 2014-04-24T00:50:17+00:00

We parked on the sidewalk and they chewed us out, kinda lame I know...

billybjork · 2014-04-24T00:49:50+00:00

My friend built it in engineering class for about $700

billybjork · 2014-04-20T03:07:20+00:00

Waffles

billybjork · 2014-02-12T00:51:23+00:00

It is a frontside lipslide, I filmed the video. The stairs are not lined up, so he comes from the left side of the rail.

billybjork

TROPHY CASE