context

india's craft sector is highly fragmented. artisans and producer groups operate across dispersed, informal networks, while brands looking to source craft have limited access to reliable information about makers, their capabilities, and provenance.

pinnakey house sets out to fix this by building trust infrastructure that makes the makers, techniques, and provenance behind craft as discoverable and verifiable as the finished product itself.

the brief

the first interaction with pinnakey house could come from anywhere in the ecosystem: an artisan looking for a verification mark, a brand looking for makers, or someone just trying to understand what pinnakey does.

a website needed to make that clear: what pinnakey house is, who it serves, and the role it aims to play in india's craft ecosystem. a coming-soon page served as the brand's first touchpoint, built to establish credibility ahead of launch.

the design direction was developed with the founder (medhavi) around three principles - archival, minimal, and tactile - that shaped the page's visual language.

the making

the idea of a network of individual makers coming together led us to the motif as a central visual language. its structure allowed us to represent both the individual and the collective: many marks forming one whole.

the motif was built into a particle system in three.js, with claude used to prototype and test the experience. this helped me iterate on the animation speed, colour transitions, particle movement, precision, and hover interactions before refining the final experience.

the animation evolved through an exploration of different ways to translate the reference motifs into motion. i experimented with scattered particles and even an eight-fold symmetrical ornament, testing how different visual languages could express the same underlying idea.

through these explorations, the direction gradually became more distilled, eventually arriving at the single texture-sampled mark used in the final animation.

overall interaction

• three.js - powers the particle formation and dispersion through @react-three/fiber. the svg mark is sampled into thousands of particles that respond to pointer movement.
• gsap scrolltrigger + lenis - connects the mark's formation to scroll, controlling its pacing and transition into the next section.
• hands animation - the hand movement was first animated in procreate, converted into a gif, and then integrated into the website. with some external help, i was able to refine and implement the interaction.

two technical challenges shaped the interaction:

• the smooth-scroll effect had to be ready before the page itself loaded.
  the animations are timed against scroll position, so smooth scrolling had to be switched on right at the start, before anything else on the page.
• mobile needed a different scrolling approach.
  smooth scrolling started lagging once combined with the particle effects and video, so on phones it just uses normal scrolling instead to keep things smooth.

my role

i designed the landing page end to end, from framing the visual language to directing its build and interactions.

• led brainstorming to frame the visual language and mood board for the landing page.
• conceived the texture-based motif and its particle formation and dispersion interaction.
• designed and refined the scroll-based animations, working through their pacing and behaviour across the page.
• directed the three.js implementation, working closely with the build process to achieve the required precision.
• decided on the font combination of the website.
• designed the full landing page layout and flow of the content given by medhavi.
• set up the github repository and development workflow for the website.

key learning

pinnakeyhouse.in was my first time building an interaction-heavy landing page. with a basic understanding of creative coding, i had to learn new tools and concepts like three.js, gsap, scrolltrigger, lenis, and particle systems.

more importantly, i learned that making an interaction work isn't just about making it look good. precision, pacing, responsiveness, and behaviour all became design decisions that required constant iteration between visual intent and technical constraints.

the site went live and received over 40 signups from its first public showcase at an event in bangalore called bangerlore.