particlefield.net
Particlefield is a studio providing a variety of motion graphic-based creative services.
They has been working various kind of creatives including motion graphic, 3d video, VFX and more. Therefore, they wanted to archive their works, which has very different formats.
First, there are 3 keywords to present their unique visuals. 'Unique', 'Organized', and 'Fun'. So I designed index page with horizontal aligned card, the layout can effectively list various formats and adopt to any kind of browser viewport.
A sidebar has filter, controls usually work categories and years. Users also can control work card height and spacing and shuffle them just for fun <3.
To implement this complex layout, I used motion.js library for performance.
You have to think about a performance to make a website present a lots of video and large image. So I designed a system to use vimeo, which is familiar with client works with videos. I built a sanity-plugin-vimeo-browsing plugin for this on my end, you can use it for your own sanity workflow.
Next, the work detail page has two sections. First one is for information, and the other one is for contents. Information section has various fields for credit and descriptions. The contents section is main field for the work, user can link with their vimeo video, or upload images to sanity storage.
The video player in detail uses HLS.js for serving huge video files. Because they already have 4k 10m video, so I try to show it original quality I can.
You can find a mascot named 'Huekie', is inspired by Hue and Cookie. The Huekie is really cute, cute, cute, and useful.
Design & Development: Jinkyu Song
Graphic and Asset Design: Particlefield