How it all started
It really started a few years ago when I got some time to look back at all the work I’d been doing over the past few years. I’ve been very busy since the last time I updated my portfolio. In these years, I’ve been so proud of the talented people from all over the world I’ve got to jam/collab with and the projects I’ve had the amazing opportunity to work on. I wanted to get this out to show what I’ve been up to but there is more than just the work.
I’ve been working/helping design students and junior designers lately on real projects and their portfolios. So, they got me hyped to do my own, haha! I also wanted to collaborate with some new dope 3D + Motion Designers and Developers. This all really inspired me to bark up that tree of making a new portfolio.
Direction + Design
Inspiration
Ok, now that everyone has inspired me to start this thing, it is now time to inspire them back. This wasn’t only just about the people/brands I’ve collaborated with, projects I’ve worked on and awards we’ve won, etc. I wanted to have some fun, show some personality a little more, get back to some of my roots and some things that inspire me. I wanted to learn some new things and overcome some new challenges. I wanted to show and prove what I’ve been helping junior designers with. Everything in my portfolio is sentimental and has some kind of meaning to my journey/experience.
Clay Material
The material is not just clay because of my name, haha. Ceramics were my favorite back in school. It’s fun and therapeutic for me now, as well. I love getting my hands dirty with the work and the process of shaping the form to create beautiful things. The models are not polished, as you can see the marks/cuts/indentations to symbolize that I’m not finished with my body of work. It also shows that I love those moments of experimenting/playing/imperfections when creating. It was so sick working with Théo Favereau and Anoukia Perrey and watching them bring ideas to life.
Doberman Pinscher (Ruby Roux)
For people that know me, they know my dog is everything to me. I got her in the beginning of the pandemic (2020). She helped me a lot when we transitioned from the office to remote. But “dog” has more meaning for me as well. I’ve always been considered an underdog. If you ask some people that know me, they might tell ya that Clay has that dog in him (their words). They might tell you Clay always has your back (protect the pack) no matter what. My Roux is by my side 24/7 and definitely that CD always looking over my shoulder, haha!
✌️with the Oura Ring
I have been freelancing/contracting my whole career but it wasn’t until my time with Oura that I really felt like I got this freelancing/contracting thing. From there, I went on to work with so many amazing talented people from all over the world.
Freelance/contract only: AKQA, Apple, Barbarian, Beats by Dre, Cricut, Exo Ape, Flagship, Gucci, IBM, Nike, Oddcommon, R/GA, Rally, Red Antler, Samsung, Vimeo and so many more.
Crown
The crown has always been a part of me coming from the Queen City (Charlotte). But that crown was there for me no matter where I went next. It was there when I moved to the Bay and again when I arrived at Crown Heights in Brooklyn. It’s a symbol of where I’m from and where I’m going.
Boanyard
Jane, a design friend back in school said one day “you should use Boanyard” haha. Whatever you want to call it (Archive, grave, sandbox, playground, etc), my Boanyard is a space for me to play/experiment/fail/succeed/learn/grow. It could be a collection of work that might not make the cut for the client, work that was for a pitch or client work that doesn’t get a case study, things that helped me grow that never saw the light or it could be a space where ideas get resurrected to something new. Boanyard isn’t just a play off my name but it’s also a space of memories, fun, and growth.
Blackletter + Calligraphy
My father would write me these beautiful messages in Vietnamese script and calligraphy in English a lot of mornings when I was a child. Seeing these marks with ink and paper stuck with me and has a special place in my heart. Music has always inspired me and it’s very special to me, from making music myself to creating art for it. So, seeing Blackletter in music has always inspired me. I love calligraphy and hand-lettering. I suck at it haha but I love to do it anyway.
Frontend
by Rob Smittenaar
Calligraphic Type Animation
The Emeritus font is a blackletter typeface inspired by traditional Blackletter and Fraktur designs. Its calligraphic forms served as the foundation for a subtle yet expressive animation concept. We began by deconstructing each letter into its core shapes, carefully stripping the terminals to create clean, animatable forms.
Next, each shape is animated individually with subtle rotations and scaling. Using GSAP’s drawSVG, we animate the mask paths connected to the letter’s terminal paths, revealing them in an organic way. The result is a playful yet elegant animation of the header and footer copy, adding a dynamic rhythm to the home and about pages while complementing the surrounding WebGL elements.
<!--
SVG Letter: B
-->
<path class="shape" d="M60.53 322.049H61.74H61.7L118.48 261.769V119.439H117.31L66.37 173.489V258.269C66.37 286.269 66.37 315.439 60.54 322.049H60.53Z" fill="currentcolor"/>
<path class="shape" d="M243.31 350.969C243.31 259.199 191.69 237.099 127.53 237.099V236.319C147.6 234.429 177.64 214.459 189.61 204.439H192.23C243.56 204.989 287.36 251.419 287.36 304.379L243.31 350.969Z" fill="currentcolor"/>
<g class="shape">
<path d="M155.01 336.939C116.14 329.889 76.63 322.729 62.26 322.439H60.8L16.86 369.879C9.30999 378.039 3.64999 388.779 1.48999 399.009H3.41999C7.83999 383.959 23.12 369.879 46.81 369.869C59.45 369.869 91.43 376.579 123.42 383.289C155.41 389.999 187.39 396.709 200.03 396.709L243.47 350.749C231.14 350.749 193.38 343.899 155 336.939H155.01Z" fill="currentcolor"/>
<!-- terminal 1 -->
<path mask="url(#bay-mask-1)" d="M0.530029 407.6C0.530029 421.21 7.53003 433.27 25.42 438.71L25.81 437.93C9.87003 432.88 2.09003 423.16 2.09003 407.99C2.09003 405.03 2.55003 402 3.43003 399.01H1.50003C0.880029 401.94 0.540029 404.83 0.540029 407.6H0.530029Z" fill="currentcolor"/>
<!-- mask 1 -->
<mask class="mask" id="bay-mask-1"><path d="M2.51998 397.76C-1.28002 416.46 5.32998 432.74 26.05 438.47" stroke="white" stroke-width="3" stroke-miterlimit="10"/></mask>
</g>
<g class="shape">
<path d="M248.58 123.829C248.59 81.0495 212.03 68.2195 166.14 67.4395H75.92L27.7 119.549C19.33 128.579 14.15 138.769 12.86 149.349H14.6C17.36 133.939 31.56 120.189 55.92 119.569L56 119.549H128.36L128.55 119.569C193.89 120.079 214.36 132.149 214.36 156.499C214.36 176.329 206.58 189.169 190.25 203.169C189.96 203.419 189.65 203.679 189.33 203.949H191.07L191.03 203.939C222.92 182.549 248.58 154.159 248.58 123.829Z" fill="currentcolor"/>
<!-- terminal 2 -->
<path class="mask" mask="url(#bay-mask-2)" d="M12.53 154.55C12.53 168.16 19.53 180.22 37.42 185.66L37.81 184.88C21.87 179.82 14.09 170.1 14.09 154.94C14.09 153.07 14.27 151.2 14.6 149.35H12.86C12.65 151.07 12.53 152.81 12.53 154.55Z" fill="currentcolor"/>
<!-- mask 2 -->
<mask id="bay-mask-2"><path d="M13.58 148.609C11.49 166.979 19.44 179.679 37.81 185.359" stroke="white" stroke-width="3" stroke-miterlimit="10"/></mask>
</g>/**
* Calligraphy animations
*/
calligraphyTl
// reveal shapes
.fromTo(shape, {
scale: 0,
rotate: -20,
transformOrigin: 'center',
}, {
scale: 1,
rotate: 0,
ease: 'expo.out',
})
// draw mask lines
.fromTo(mask, {
drawSVG: '0% 0%',
}, {
duration: 4,
drawSVG: '0% 100%',
ease: 'none',
}, '-=2')
// hide shapes
.to(shape, {
scale: 0,
rotate: 20,
ease: 'expo.in',
});Clip Path Animations
Diamond-shaped motifs create a consistent visual thread across the site. You’ll see them in diagonal cuts, page transitions, buttons and subtle interactive touches. Brought to life with SVG clip paths, these geometric forms provide a simple but effective way to layer content and tie the whole design together.
Scroll-based Timeline Animations
The remaining pages were brought to life using GSAP timeline animations, intricately tied to ScrollTrigger for smooth, scroll-synced playback. SplitText animations added dynamic typographic motion, while sticky elements and subtle parallax (mouse) effects introduced depth and layering.
WebGL
by Thomas Van Glabeke
Setup & System
Every WebGL scene runs on one single canvas that we move across sections using observers. Instead of creating a new renderer for every scene, this approach keeps things lightweight and seamless.
The stack was straightforward: Three.js for the core, pmndrs/postprocessing for post processing, and n8ao for the ambient occlusion pass.
On top of that, detect-gpu to adjust the rendering based on the user’s device, so the experience is performant on low-performance devices while still looking even better on a high-end machine
Rendering & Visual Direction
For once, I didn’t write any custom shaders 😄. Everything is using Three.js’ awesome physical material. The challenge was to get as close as possible to the Octane renders we had from the 3D designers as reference, and then I tried to get as close as possible directly inside WebGL.
No baking here — the whole idea was to keep it real-time and dynamic so we could adjust lights on the fly. We used lights in the scene to shape the mood, and then added an environment map to bring in those realistic reflections and soft lighting you’d normally expect from a static render. This way everything stayed flexible, and we could tweak things live instead of being locked into baked textures.
Collaboration & Iteration
Because each scene needed its own mood, we used the Tweakpane GUI so the design team could tweak things live. Everything was adjustable, colors, lights, materials, transforms, etc. And since configs could be exported and imported, we could pass presets back and forth without touching code. It turned into a really nice workflow. Faster iteration, way more creative control, and no back and forth.
Backend for frontend
by Ruud Luijten
We built a robust foundation using Vue/Nuxt and created a backend-for-frontend API layer that streamlined data usage within the frontend app. The BFF API layer acted as an intermediary between external services and the frontend, aggregating and normalizing data before it reached the client components. This approach reduced complexity in the UI, minimized redundant requests, and ensured a more consistent data flow across different pages, ultimately resulting in a smoother user experience and a cleaner, more scalable codebase.
Content Management
For content management, we implemented Storyblok, a headless CMS that empowered non-technical team members to manage and update content without touching the codebase. Storyblok’s visual editor and component-based structure worked perfectly with our Vue/Nuxt setup, enabling dynamic content delivery and rapid iteration while maintaining a clean separation between development and content operations.
Hosting
We hosted the site on Vercel, taking advantage of its seamless integration with modern frontend frameworks and its fast global CDN to deliver assets efficiently. This hosting choice allowed for automated deployments, preview environments, and instant rollbacks, which streamlined our release process and improved reliability.
Collaboration
by Clay Boan
Now back to wanting to collaborate with some new awesome 3D + Motion Designers and Developers. This project was a true collaboration from day one and even now as we speak. I always wanted everyone to do their thing on the project and have some fun with it. I loved how everyone brought ideas, and to see them work their magic was so awesome. Sure we had some challenges with everyone being very busy with client work but we found a way to make it happen. I’m so thankful for everyone on this amazing team and helping me bring my portfolio to life.
When you get a minute, please show some love to Ruud Luijten, Théo Favereau, Rob Smittenaar, Anoukia Perrey, Thomas Van Glabeke.
دیدگاهتان را بنویسید