fromanother: Award-Winning Creative Agency Website

When the client is a creative agency, the website has an unforgiving job: it has to out-craft the work in its own portfolio. fromanother is an artist-led creative agency — direction, digital and immersive experiences across Asia and Europe — and this award-winning creative agency website case study breaks down how the site was built: the brief, the GSAP motion system, the targeted WebGL, the Prismic content layer, and the performance discipline that earned it FWA of the Day plus Awwwards Site of the Day and the Awwwards Developer Award — written by the developer who shipped it.

The proof first (because agencies buy on trust)

If you're commissioning a site, credentials matter before craft. fromanother.love won:

Recognition	Body	Detail
FWA of the Day	The FWA	thefwa.com/cases/fromanotherlove
Site of the Day	Awwwards	14 May 2026, overall score 7.44
Developer Award	Awwwards	Front-end engineering, score 7.25

The Developer Award is the one I care about most on this project. Awwwards' jury hands it out specifically for the engineering — not the visual design — so on an agency site whose whole point is motion and interaction, it's the panel confirming the build itself was best-in-class. You can see the listing on Awwwards and the site live at fromanother.love.

Who built it — and why the developer credit matters

The site was a collaboration: fromanother owned the creative direction and identity, designer Huy Phan — an Awwwards jury member — shaped the interface, and Hon Tran built it as the creative developer. That's me.

Leading with that isn't ego. When a brief is all about editorial pacing and fluid motion, the distance between a gorgeous Figma file and a site that actually breathes at 60fps is the developer. I've spent 11+ years building award-winning web experiences for clients across Norway, Denmark, Sweden, Malta, Germany and Vietnam; I've been named Awwwards "Independent of the Year" twice, I hold multiple Awwwards Site of the Day awards and multiple FWA of the Day wins, and I sit on the Awwwards jury. On an agency's own site, that experience is the line between motion that reads as craft and motion that stutters and quietly undersells the studio.

The brief: a portfolio that out-crafts the portfolio

An agency site is a recursive problem. fromanother's product is taste — direction, digital, immersive — so the site can't merely list case studies; it has to demonstrate the studio's eye in how it moves, paces and transitions. Three constraints shaped every decision:

• The site is the pitch. A prospective client's first impression of "can they do immersive?" is the homepage itself. Every transition had to feel deliberate, cinematic, and unmistakably premium — never templated.
• The work has to breathe. Agency portfolios live or die on how imagery is presented. Cinematic media, editorial whitespace, and fluid reveals had to read as confident, not busy.
• The team updates it themselves. New projects, new hires, new lab experiments — the studio ships constantly, so the content had to run on a headless CMS, never a developer ticket.

The craft: GSAP, WebGL, and the content layer

The stack is Next.js + React on the front end, Prismic as the headless CMS, GSAP for the motion system, and targeted WebGL for the heavier, cinematic transitions. Here's how the signature pieces came together.

Motion as a system, not a pile of one-offs

A motion-led agency site collapses if every animation is hand-tuned in isolation — the rhythm goes incoherent and the whole thing feels noisy. The fix is a shared motion language: one set of eases, a consistent duration scale, and ScrollTrigger driving section reveals so the pacing stays editorial from top to bottom.

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

// One reveal grammar, reused site-wide — this is what makes pacing feel authored.
gsap.utils.toArray<HTMLElement>('[data-reveal]').forEach((el) => {
  gsap.from(el, {
    yPercent: 16,
    opacity: 0,
    ease: 'expo.out',
    duration: 1.1,
    scrollTrigger: { trigger: el, start: 'top 85%', once: true },
  })
})

Everything animates on transform and opacity only, so reveals stay on the GPU compositor and never touch layout — that's the difference between silky and janky on a media-dense page. The deeper mechanics behind this — pinning, scrub, parallax — are the same ones I break down in the GSAP ScrollTrigger tutorial.

WebGL where it earns its weight

Not every effect deserves a WebGL context — it costs memory and battery, so I reserve it for the moments that carry the "immersive" promise: cinematic image transitions and displacement between work pieces. The rule I follow is WebGL for the hero moments, DOM for everything else, and the canvas is mounted only when it's actually on screen.

// Mount the WebGL scene only when the section is near the viewport — never on load.
const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) mountGL()      // spin up the renderer just in time
  else disposeGL()                          // free the context when it scrolls away
}, { rootMargin: '200px' })

io.observe(canvasSection)

That discipline — lazy contexts, disposing renderers, capping the pixel ratio — is exactly what keeps a heavily animated site inside its performance budget. It's the same thinking behind Core Web Vitals for animation-heavy sites, and it's a big part of why this build took the Awwwards Developer Award rather than just the visual nod.

Prismic: so the agency owns its own site

Choosing Prismic as the headless CMS meant every project, role, and lab experiment is a content entry — not a code change. Next.js fetches it at build/revalidation time and renders static-fast pages, while the team adds new work through the Prismic editor without a deploy. For an agency whose portfolio changes constantly, that's the difference between a living site and one that quietly goes stale — and it's why I default to a headless stack for studio and agency clients.

The result: what the awards actually signal

Three juries — the FWA, and Awwwards twice (design and development) — independently rated this a best-in-class agency site. For fromanother, that's the portfolio doing its literal job: the studio's own site is now the strongest proof in its pitch. For a prospective client browsing "can they build something immersive?", the answer is on the homepage before they ever read a case study.

The lesson generalises past one project: a creative agency website lives or dies on the engineering, not the mockup. A GSAP motion system, WebGL used surgically, a headless CMS the team controls, and ruthless performance discipline — that's the playbook that ships an award-caliber site instead of a beautiful one that stalls. You can see the same approach on the Uncommon Studio case study, the By-Kin award-winning website, and the Iventions events site.

FAQ

What is the fromanother website built with?

Next.js and React on the front end, Prismic as the headless CMS, GSAP for the motion system, and targeted WebGL for the cinematic transitions — a stack chosen so an immersive, media-dense agency site stays fast and the team can update it themselves.

Who designed and developed fromanother.love?

It was a collaboration: fromanother led creative direction and identity, Huy Phan (an Awwwards jury member) designed the interface, and Hon Tran built it as the creative developer responsible for the front-end, GSAP motion, WebGL and Prismic integration.

What awards did fromanother.love win?

FWA of the Day, plus Awwwards Site of the Day (14 May 2026) and the Awwwards Developer Award for its front-end engineering.

How much does an award-winning creative agency website cost?

It depends on scope, but a bespoke, motion-led agency site is a premium engagement, not a template. I break down real ranges in how much an animated website costs.

Let's build something award-worthy

If you're an agency, studio or brand that needs a website which out-crafts your own portfolio — editorial pacing, WebGL, motion that reads as taste — that's exactly what I do as a creative developer.

• See how I work and the engagement tiers on the services page.
• Browse more shipped, awarded work in the projects archive.
• Ready to talk? Let's talk →

---

Written by Hon Tran — creative developer, founder of hontran.dev, and Awwwards jury member. 11+ years building award-winning, performance-first web experiences (GSAP, WebGL, Next.js) for clients worldwide. The first Vietnamese developer to win an international web award. hontran.dev · Behance.