Garfi.Studio

How it was made

The original home screen has no work thumbnails and no intro text. A single orange band runs across the showreel.

The loader, intro, header and INFO panel are all tied to this band.

The curve by which the band settles differed from standard easing. Half of the 800ms passes with only 8% of the movement, and the rest lands at the end.

This measured curve was transcribed into a table. The effect of tearing the band with the pointer was built by writing a new shader.

In the work list, each project has one row of photos moving at a different speed. The showreel video was replaced with photo cut transitions.

On case pages, only the one chapter matching the scroll position opens in the left sidebar.

Key features

• Loader · Orange band intro
• 8 category filters
• Per-project photo marquee rows
• Case sidebar chapters · Next project ending

Where and how to use it

Suits design and branding studios with many client work photos. One row of the list is one project.

Points to check

The original showreel video and sound are not included. Each project needs 9 or more photos so the marquee rows do not run empty.