Reshaping Telha Clarke’s Digital Residence from Wordmark to Movement System

Laying the Foundations of a New Identification

Telha Clarke is a Melbourne-based Structure & Inside Design studio. They work throughout numerous venture typologies, from residential to industrial. Every venture is exclusive, responding to a number of components, so the end result isn’t a single imaginative and prescient.

We first began the venture by working carefully with Nicolas Garcia (Studio Paack), whom we selected to assist us with our consumer’s new model identification. The aim was easy: refine their identification with a brand new wordmark, introducing extra fashionable typography and a brand new shade palette.

We labored hand in hand to translate this new identification as successfully as doable into its utility on the long run web site, in addition to throughout different supplies, together with communications, all the way down to the smallest particulars. We even introduced the rebranding and web site launch to life via customized 3D scenographies impressed by our consumer’s personal work.

Format & Design Path

Clearly, we needed to keep considerably in a basic, clear black-and-white aesthetic/really feel that works for many structure studios, however we needed to push the structure with a robust movement system, and good transitions between sections.

Our essential goal was to mix the magnificence and minimalism of Telha Clarke’s tasks with the depth of experience and technical rigor that outline their apply. This steadiness takes form via structured layouts and editorial sections, enhanced with delicate components that replicate the precision and self-discipline inherent to structure.

This consideration to precision additionally extends to the calls to motion (CTA). A single floating widget serves as the first interactive ingredient all through the navigation, dynamically adapting to the content material to ship context-specific actions. It creates a steadiness between visible refinement and readability of the message that evolves with the person’s journey.

Designing with Goal

The structure was designed with a transparent intention: spotlight the tasks with out letting the interface take over. Telha Clarke’s work depends closely on sturdy imagery and cautious composition, so the web site wanted to behave as a supporting construction somewhat than a visible assertion in itself.

Layouts are constructed round massive visuals, beneficiant spacing, and a restrained typographic system. Each ingredient is positioned to bolster the content material hierarchy, permitting photographs to stay the first level of focus whereas textual content and navigation quietly present context.

As talked about within the earlier part, to keep away from overwhelming the positioning with repeated calls to motion, we launched a wise CTA widget system. Every web page encompasses a single, persistent CTA that adapts dynamically to the part at present seen on display screen. Because the person scrolls, the CTA updates its content material and intent, staying contextually related with out multiplying visible anchors throughout the web page. This method retains the interface quiet and intentional, whereas nonetheless guiding customers via the positioning in a significant method.

We additionally tailored the identical widget for a number of functions: serving as a filter dropdown on the Works web page for cell, or remodeling right into a ‘Subsequent Undertaking’ button that robotically expands when reaching the underside of a venture web page, inviting customers to discover additional.

A Movement System that Displays Craft

The movement system was crafted to really feel refined, but at all times intentional. The animations needed to replicate the precision and calm inherent in Telha Clarke’s architectural work, by no means flashy, at all times thought of. Each interplay, each hover, each scroll impact was calibrated to be easy, elegant, and intentional.

The location opens with a loader that reveals the brand new wordmark in two steps, subtly referencing the duality of the 2 founders, Tim Clarke and Stuart Telha. The loader’s deliberate tempo displays the care and craftsmanship behind the studio’s work, creating a direct hyperlink between the digital expertise and their architectural method.

Seamless Connections between Sections

We launched delicate scrollytelling sections all through the positioning, significantly on the homepage and About web page. The aim was to attach sections easily, nearly imperceptibly, making a narrative stream that enhances each storytelling and the general scroll expertise.

This method additionally solved a key problem: the way to showcase Telha Clarke’s work with out overwhelming the person, highlighting solely the three or 4 tasks the studio needed to function. On the homepage, for instance, the “highlighted works” part flows right into a deeper exploration of their imaginative and prescient via a contextual grid of photographs. The grid gives further glimpses of the studio’s broader work, utilizing delicate parallax and depth to complement the visible expertise. One key picture then expands and scales, main into the “Our Imaginative and prescient” part. Every animation and transition is rigorously designed to attach sections seamlessly, protecting the person immersed whereas gently guiding them via the story of the studio. The result’s a easy, elegant narrative that balances focus, context, and movement.

On the About web page, the picture within the “Values” part is used to create a seamless transition into the following part. The impact depends on a clip-path mixed with a translateX animation for optimum efficiency. Utilizing GSAP and the highly effective ScrollTrigger plugin, this leads to a easy, high-performance scroll-linked animation.

const animation = gsap.timeline()

const valuesRect = this.$values.getBoundingClientRect()
const imageRect = this.$imaginative and prescient.getBoundingClientRect()

const high = imageRect.high - valuesRect.high
const backside = valuesRect.backside - imageRect.backside
const left = imageRect.left - valuesRect.left
const proper = valuesRect.proper - imageRect.proper

animation
  .to(this.$picture, {
    clipPath: `inset(${high}px ${proper}px ${backside}px ${left}px)`
  })
  .to(this.$innerImage, {
    x: imageRect.left + imageRect.width / 2 - retailer.w.w / 2,
    scale: 1
  }, 0)

const animation = gsap.timeline()

const valuesRect = this.$values.getBoundingClientRect()
const imageRect = this.$imaginative and prescient.getBoundingClientRect()

const high = imageRect.high - valuesRect.high
const backside = valuesRect.backside - imageRect.backside
const left = imageRect.left - valuesRect.left
const proper = valuesRect.proper - imageRect.proper

animation
  .to(this.$picture, {
    clipPath: `inset(${high}px ${proper}px ${backside}px ${left}px)`
  })
  .to(this.$innerImage, {
    x: imageRect.left + imageRect.width / 2 - retailer.w.w / 2,
    scale: 1
  }, 0)

Leverage the Energy of GSAP’s registerEffect

GSAP’s registerEffect is a strong technique that means that you can create reusable animations throughout your whole web site, whether or not used as standalone animations or inside a timeline.

On this venture, for the reason that web site is comparatively easy, we primarily use it for the title reveal animation. It’s mixed with piecesjs, a light-weight framework primarily based on native elements that lets us create a JavaScript class related to a DOM ingredient. This class is robotically instantiated every time the ingredient seems within the DOM.

Creating the Impact

This impact is pretty easy, nevertheless it allows us to reuse the very same animation all through the web site, sustaining constant easing, period, and stagger values. This helps guarantee a cohesive and constant movement system throughout your complete expertise.

gsap.registerEffect({
  identify: 'revealTitle',
  extendTimeline: true,
  defaults: {
    ease: 'expo.out',
    period: 1.2,
    stagger: 0.1
  },
  impact: (targets, vars) => {
    const tl = gsap.timeline({ defaults: vars })

    tl.to(targets, { yPercent: 0 })

    return tl
  }
})

Utilizing the Impact in a Element

We used piecesjs to simply reuse this title animation all through the web site. Nonetheless, because it’s registered as a GSAP impact, we will additionally use it wherever inside particular timelines when wanted.

import { Piece } from 'piecesjs'
import gsap from 'gsap'

class Title extends Piece {
  mount() {
    this.break up()
    this.initTrigger()
  }

  unmount() {
    this.set off?.kill()
  }
  
  break up() {
    ...
  }

  initTrigger() {
    this.set off = retailer.scrollTrigger.create({
      set off: this,
      begin: 'high 90%',
      as soon as: true,
      animation: gsap.results.revealTitle(this.splittedTitle.occasion.traces)
    })
  }
}

customElements.outline('c-title', Title)

Then you definitely merely have to name the part straight within the HTML:

<c-title>Telha Clarke is a Melbourne primarily based structure & inside design studio.</c-title>

This illustrates a reasonably easy use case, however the identical method can completely be utilized to extra complicated animations and elements.

Tech Stack

• Frontend: Templating dealt with with Blade (PHP), complemented by Tailwind CSS for styling.
• GSAP: Our go-to for complicated and high-performance animations, mixed with ScrollTrigger for scroll-based results.
• Lenis: For easy scroll, by Darkroom Engineering.
• Taxi: For highly effective JavaScript web page transitions, by Unseen.
• piecesjs: JavaScript framework constructed on native internet elements, by Quentin Hocdé.
• Again-end: WordPress as a CMS, enabling versatile and customized content material modifying for the consumer, powered by ACF.
• Figma: Our essential design instrument for internet layouts.
• Jitter: For all our web site movement exploration.

Ultimate Ideas

The important thing to this venture was making a cohesive new identification for Telha Clarke, from the model itself to the web site, whereas staying true to the clear, minimal world of structure. The aim was to provide full area to the studio’s content material, whereas bringing our inventive perspective to resolve challenges via movement and good, approachable UI programs. This venture is the results of a detailed collaboration from the very first branding discussions via to the event of the positioning, guaranteeing a constant narrative all through.

Thanks to Nicolas Garcia (Studio Paack) for his help on the model identification, and to Emeric Desgranges for crafting a completely customized 3D scene for the web site’s social media communication.

A particular due to Tim and Stuart for trusting us all through the method and giving us the liberty to refresh the studio’s identification whereas staying true to the essence of their work.