How much does a website or web app cost?

Focused projects such as a landing page with a WebGL hero usually start around €12,000. Larger product work is planned in two-week sprints; I share a fixed estimate after a free 30-minute discovery call.

How long does a typical project take?

A marketing site usually takes four to eight weeks from kickoff to launch. Product and design-system work runs in iterative sprints, with something usable in production within the first month.

Do you work with teams in other time zones?

Yes. I am based in Lisbon (UTC+0) and work with teams from San Francisco to Sydney. I keep at least three hours of overlap with your core hours and write thorough async updates.

Can you speed up my existing website?

Absolutely. A performance audit covers Core Web Vitals, JavaScript and image budgets, and rendering strategy. You get a prioritised report and I can implement the fixes with your team.

Are your websites accessible?

Every project targets WCAG 2.2 AA: semantic HTML, keyboard support, visible focus, reduced-motion alternatives and screen-reader testing on real devices.

Mara Ellison — Creative Frontend Developer & WebGL Engineer in Lisbon

01 — About

Designer’s eye, engineer’s discipline.

I started as a graphic designer in Porto and learned to code so my layouts could move. Eleven years later I build the parts of products people remember: onboarding that feels effortless, dashboards that explain themselves, and WebGL moments that make a brand feel alive.

Today I work independently with product teams and studios across four continents. I care about the invisible details — focus states, reduced-motion fallbacks, 60 fps on mid-range phones — because that is where craft turns into trust.

Based in: Lisbon, Portugal (UTC+0)
Speaks: English, Portuguese, German
Off-screen: Modular synths & bouldering

The story so far

2013
Pixels & print
A communication-design degree, a thesis on generative typography and my first hand-written JavaScript animation.
2016
Berlin & WebGL
Joined Kraft & Pixel to build award-winning WebGL campaigns for automotive and fashion brands.
2019
Product at scale
Led frontend at Northwind Finance in London: a design system, a performance budget and a team of eight.
2022
Going independent
Opened a one-person studio in Lisbon and partnered with teams in nine countries.
Now
Teaching & open source
Speaking at conferences, writing on the blog and maintaining Kinetic Type, an open-source motion tool.

02 — Skills

A toolkit tuned for craft and speed.

Hover or focus any skill for context. Click a word in the cloud to see where I use it.

Capability map

Core stack proficiency

Tools I reach for

Click a word

Signature skills

Component architecture, concurrent features, custom hooks and performance profiling.
Strict typing for design systems and data-heavy dashboards.
Real-time 3D, custom materials, instancing and post-processing.
Hand-written shaders for transitions, noise and particles.
Framer Motion, GSAP and CSS — always with reduced-motion fallbacks.
WCAG 2.2 AA audits, focus management and screen-reader testing.
Budgets, lazy loading, image pipelines and Core Web Vitals.
Tokens, theming, documentation and adoption across teams.
Islands architecture, content collections and static generation.
Tooling, APIs and build pipelines.

03 — Selected work

Projects that move people — and metrics.

A selection of client work, products and open-source tools. Open any project for the full story.

2024

A calm, glanceable dashboard for 2M+ business banking customers.

Web apps
Next.js
TypeScript

2024

Configure jackets and packs in real time, then check out in one tap.

E-commerce
Next.js
Three.js

2022

A PWA that keeps maps, notes and photos available with zero signal.

Web apps
React
IndexedDB

2025

Tokens, 60+ accessible components and docs, ready on day one.

Design systems
React
Radix UI

2022

A museum room where visitors grow a garden of sound and light.

WebGL & 3D
Web Audio API
WebGL

2025

An onboarding flow that everyone can finish, whatever their abilities.

Web apps
React
XState

2023

Forty years of sea-surface data on an interactive WebGL globe.

WebGL & 3D
Three.js
GLSL

2023

An open-source playground for animated type, exported as video or code.

Open source
React
Framer Motion

2025

A cosmic WebGL hero, a speaker CMS and a two-step ticket checkout.

WebGL & 3D
Astro
Three.js

04 — Kind words

Trusted by teams who ship.

Autoplay pauses while you hover

Aurora

“Mara turned a dense financial dashboard into something our customers genuinely enjoy using. Page loads dropped by half and our NPS jumped 22 points.”

Priya RamanVP Product, Northwind Finance

Tidal

“A rare mix of engineer and artist. The WebGL globe she built became the centrepiece of our campaign — and it still runs smoothly on five-year-old phones.”

Tomás FerreiraCreative Director, Blue Current Foundation

Lumen UI

“Lumen UI saved our team months. The tokens, docs and accessibility defaults are the best I have seen in any starter kit.”

Hannah OkaforDesign Systems Lead, Fieldnote

Pulse

“She sweats the details nobody else sees — focus states, reduced motion, loading skeletons. Our Lighthouse scores went from 61 to 99.”

Daniel KimCTO, Pulse Health

Nordlys

“The 3D configurator lifted conversion by 31% in its first quarter. Mara was a joy to collaborate with across three time zones.”

Sofie LindgrenHead of E-commerce, Nordlys Outdoor

Sonic Garden

“Visitors stayed three times longer than at any previous exhibit. Sonic Garden felt alive, and it never crashed once in six months.”

Inês MoreiraCurator, Museu de Luz

05 — Experience

An interactive résumé.

Filter the timeline and expand any entry for the details.

Upcoming talks & workshops

Motion That Matters — Web Motion Summit 2026
12 Nov 2026 · LX Factory, Lisbon
Hands-on WebGL for Frontend Developers
3 Dec 2026 · Online (Zoom)

2022 — PresentWork
Independent creative developer & studio partner
Mara Ellison Studio Lisbon · Remote
Partnering with product teams and studios on interactive products, WebGL experiences and design systems.
2019 — 2022Work
Senior frontend lead
Northwind Finance London, UK
Led the rebuild of the business-banking dashboard used by two million customers.
2016 — 2019Work
Interactive developer
Kraft & Pixel Studio Berlin, DE
Built WebGL campaigns and product launches for automotive and fashion brands.
2014 — 2016Work
Frontend developer
Mosaic Labs Porto, PT
Shipped responsive websites and web apps for more than thirty clients.
2009 — 2013Education
BA in Communication Design
University of Porto — Faculty of Fine Arts Porto, PT
Typography, interaction and generative design.
2024Awards
CSS Design Awards — Best UI
Nordlys 3D configurator Online
Recognised for interface design, usability and innovation.
2017 — 2025Awards
Awwwards SOTD ×5 · FWA of the Day ×3
Various client projects Online
Recognition for creative development across campaigns and product sites.
2026Talks
“Motion that matters” — Web Motion Summit
Upcoming · 12 Nov 2026 LX Factory, Lisbon
How to design animation systems that explain, not decorate.
2023Talks
“Shaders for frontend developers”
Frontend Porto Porto, PT
A gentle introduction to GLSL for people who already know CSS.

06 — Around the world

Where I’ve worked.

Clients and collaborations across four continents. Drag the globe or pick a city.

cities: 11
continents: 4
collaborators: 60+

LisbonHome base & studio · since 2022

Loading interactive globe…

07 — Writing

Notes on craft, code and motion.

Long-form articles on WebGL, performance, motion design and the web platform.

Browse all articles Subscribe via RSS

Featured18 Aug 20264 min read

Building Buttery WebGL Page Transitions with Three.js

A step-by-step guide to shader-based image transitions in Three.js — texture loading, a displacement shader, GSAP timing and graceful fallbacks.

Read article

Latest articles

08 — FAQ

Questions, answered.

Something else on your mind?

I build interactive marketing sites, product interfaces, WebGL experiences and design systems. Most projects are with product teams, studios and agencies who want something that feels crafted but stays fast and accessible.

09 — Contact

Let’s build something remarkable.

Tell me about your project, timeline and budget. I reply to every message within two working days.

Currently booking projects from November 2026.

hello@maraellison.dev
+351 912 345 678
Studio: Rua das Flores 28, 1200-195 Lisboa, Portugal
Mon–Fri, 9:00–18:00 WET

Mara Ellison, creative frontend developerCraftingplayful,high-performancewebexperiences.

The story so far

Pixels & print

Berlin & WebGL

Product at scale

Going independent

Teaching & open source

Tools I reach for

Signature skills

Aurora — real-time banking dashboard

Nordlys — 3D outdoor gear configurator

Atlas — offline-first travel journal

Lumen UI — design system starter kit

Sonic Garden — generative audio-visual installation

Pulse — accessible health onboarding

Tidal — ocean temperature globe

Kinetic Type — motion typography tool

Orbit 26 — conference website & ticketing

Upcoming talks & workshops

Independent creative developer & studio partner

Senior frontend lead

Interactive developer

Frontend developer

BA in Communication Design

CSS Design Awards — Best UI

Awwwards SOTD ×5 · FWA of the Day ×3

“Motion that matters” — Web Motion Summit

“Shaders for frontend developers”

Where I’ve worked.

Building Buttery WebGL Page Transitions with Three.js

Latest articles

Questions, answered.

What kind of projects do you take on?

How much does a website or web app cost?

How long does a typical project take?

Do you work with teams in other time zones?

Can you speed up my existing website?

Are your websites accessible?

Let’s build something remarkable.