piergorelli.com, redesigned
Own studio · Valencia
Blueprint concept, compile intro and View Transitions on showcase pages, plus a blog with almost no JavaScript. Lighthouse mobile, September 2026: 98 on the home, 99 on the blog.
[Services / 02.1]
Built as drawn.Web development for creative agencies. Animated sites, built on Astro, WordPress or Drupal.
◆ machine · generated · 17 tokens · 1480 ms
I help creative agencies turn designs into fast, cool and accessible websites.
- Lighthouse
- 95+ target
- Motion
- Tested for smoothness
- Access
- WCAG 2.1 AA
- Handover
- Code + CMS guide
Your idea should survive the build.
- 01
The concept moved in the pitch deck. The built site doesn't.
fix → I build the trickiest animation first, in the browser, and your designers sign it off before anything else.
- 02
The freelancer vanished two weeks before launch.
fix → One senior developer, a staging link from day one, a written plan, and replies within 24 hours, Monday to Friday.
- 03
It looked great, then Lighthouse said 34.
fix → On my usual stacks (WordPress with Sage and Astro) we aim for Lighthouse 95+. We agree that at kick-off and I measure it before launch. Every animation is tested for smoothness.
- 04
The client's editors broke the layout in a week.
fix → I shape the CMS around how your client's editors actually work, add guardrails, and train them.
- 01
Campaign & launch sites
Scroll stories, WebGL moments and page transitions for launches and events. Made to stand out, and to load fast on a train.
- 02
Corporate & brand sites
Accessible, multilingual sites your client can run for years, built from components your designers will recognise.
- 03
Headless & classic CMS
Astro with a headless CMS when speed and motion come first. WordPress or Drupal when the editors, plugins or multi-site setup need them.
- 04
Web apps & platforms
Portals, configurators, bookings and member areas with Laravel and Filament, or Angular. Mobile apps with Ionic when one codebase is enough.
- 05
Takeovers & rescues
Got a site nobody dares to touch? I start with a short audit, then fix it, upgrade it and keep it running.
- 06
Prototypes for pitches
A clickable, animated prototype of the big idea, so your pitch shows the experience instead of a video of it.
Motion is designed, not guessed.
The difference between “it moves” and “it feels right” is often just a curve and a duration. I define those with your designers, like colour and type, so every interaction feels part of the same system.
--ease: cubic-bezier(0, 0, 1, 1); --dur: 1.2s;--ease: cubic-bezier(0.76, 0, 0.24, 1); --dur: 1.2s;--ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 1.2s;--ease: cubic-bezier(0.34, 1.56, 0.64, 1); --dur: 1.2s;
Watch the site take shape.
- 01Before the build
Design review
Before writing any code, I go through the Figma files with your designers: what's hard to build, which animations need a prototype, and what the CMS has to handle.
- 02First
Motion prototype
The boldest moments get built first as a working prototype, so everyone can see and feel them before we commit.
- 03Build
Build on staging
Page by page, the site comes together on a private link that you and your client can check whenever you like.
- 04Pre-launch
QA
Before launch, I test on real phones and browsers, with a keyboard and a screen reader, checking speed and reduced motion along the way. You get a written report of the results.
- 05Launch
Handover
Go-live, clean code, setup notes and a CMS guide for your editors. I can look after the site afterwards, or your team can take it from there.
- Front-end
- Astro
- TypeScript
- Tailwind CSS
- Vanilla JS when it's enough
- Motion
- GSAP
- ScrollTrigger
- Lenis
- Swiper
- WebGL
- View Transitions
- CMS
- WordPress with Sage
- Headless WordPress
- WooCommerce
- Drupal
- Apps
- Laravel
- Filament
- Angular
- Ionic
- Delivery
- Git
- Netlify
- Figma Dev Mode
- Staging per branch
WordPress site for a ceramics manufacturer
Ceramics manufacturer
Custom Blockstudio blocks the marketing team can compose freely, GSAP motion that lets every surface and glaze take the stage, and a smart importer that turns the product catalogue into pages without manual entry.
Patient support program for migraine
Healthcare · patient platform
An Angular app that stays with patients throughout their therapy, a Filament back office for the care team, one Laravel API behind both, and a CI/CD pipeline that tests and ships every release.
The first one is the site you're on right now, so feel free to look around. Press ⌥G to see the grid.
Do you work white-label for agencies?
When the project needs it, yes. I work under NDA, inside your tools and processes, and your client only ever deals with your agency. Code, documentation and handover can carry your brand.
Can you build exactly what our designers drew?
That's the whole point. I build from your Figma files and bring your designers into the review of every page. If something would hurt speed or accessibility, I flag it early and suggest an alternative that keeps the idea.
Which animation tools do you use?
GSAP with ScrollTrigger for most scroll and timeline work, native View Transitions between pages, and a touch of WebGL for backgrounds and hero moments. Every animation respects reduced-motion settings and has a static fallback.
Astro, WordPress or Drupal?
Astro, often with a headless CMS, for fast marketing sites with lots of motion. WordPress when your client's editors already know it or need its plugins. Drupal for complex, multi-site or enterprise setups. I'll recommend one on our first call and tell you why.
How long does a project take?
It depends on the scope, so I don't give a number before seeing the designs. Once I have the brief and the Figma files, you get a written quote and a schedule with milestones before any work starts.
Do you maintain the sites after launch?
If you'd like me to: updates, monitoring, small improvements and support for your team, either as a monthly block of days or billed as it comes up. If you'd rather take it in-house, the handover gives you everything you need.