Skip to the lab
creativeradarTHE CREATIVE LAB

Jhay Jhay Alcorcon · CofeeUI · Creative Lab

Websites that move with intention.

Frontend engineer in Nueva Ecija, Philippines, about five years into building production interfaces. This lab is where I practise what I enjoy most: creative animation, careful design, and motion that feels smooth and professional.

Book a 30-min call (opens Calendly in a new tab)Email contact@alcorcon.dev

Experiments, not client work. Every demo here uses my own material.

The page's timing curve: ease-out, 400 milliseconds.
What
Frontend engineer · React, Next.js, MUI, Node
Where
Nueva Ecija, Philippines · Asia/Manila
Reach
Book a call or email. Replies come by email; call times are confirmed in Calendly.

The lab

Choose a way in.

Five patterns I use to make a page feel considered: a story told by scrolling, a choice, a feel you can tune, a before and after, and a brief you can send. Try them in any order.

  1. 01Scroll story: How does an interface get built?
  2. 02Choose a path: Which kind of help fits you?
  3. 03Live configurator: What does smooth actually feel like?
  4. 04Before / after: What does polish add?
  5. 05Guided discovery: How do you ask without a long email?
  6. Studies: What else lives in the lab?
  7. Contact: How do we start?

01 · Scroll story

How one card gets built.

Four passes on the card that closes this page, from intention to shipped. The measurements are read from the real card.

Skip the build story

  1. PASS 1 / 04

    Intention

    One job: get a call booked. Boxes and spacing first, nothing else.

    • height 44px
    • padding 12/20px
    • radius 22px
    • contrast 5.97:1

  2. PASS 2 / 04

    Craft

    Type, colour and contrast go on, and a few extras with them.

  3. PASS 3 / 04

    Motion

    The entrance gets its timing, from linear to an ease-out that settles.

    Timing curve: Calm, 400 milliseconds.

    carried from 01

  4. PASS 4 / 04

    Shipped

    The extras come off. What's left does the job.

    /* Less is more */

    git commit -m "Designed with intention · Built with curiosity"

PASS 4 / 04

Intention

One job: get a call booked. Boxes and spacing first, nothing else.

Craft

Type, colour and contrast go on, and a few extras with them.

Motion

The entrance gets its timing, from linear to an ease-out that settles.

Shipped

The extras come off. What's left does the job.

Timing curve: Calm, 400 milliseconds.

carried from 01

  • height 44px
  • padding 12/20px
  • radius 22px
  • contrast 5.97:1

/* Less is more */

git commit -m "Designed with intention · Built with curiosity"

02 · Choose a path

What do you need?

Pick the closest fit and I'll show work that matches. Each choice also sets the timing I'd start from.

Timing curve: Calm, 400 milliseconds.

Small-business websites

Mobile-first sites that explain what you do in five seconds and make calling, booking or finding you effortless.

My starting timing: Calm, 400ms. Content arrives fast and settles, so it's readable straight away.

Proposal sites I designed and built (not commissioned client work)

Engagement & interactive features

Scroll-told stories, guided builders and visual tools that give visitors something to do, without getting in the way of the next step.

My starting timing: Playful, 700ms. It passes the mark and settles back, for moments meant to be noticed.

Frontend help for your product

React and Next.js work on an existing app or site: reusable components, responsive UI, accessibility and performance fixes. The same curiosity is behind Behind the Click, my learning project on what happens under everyday clicks.

My starting timing: Snappy, 200ms. Quick, decisive feedback for product UI.

About five years building production interfaces for logistics, identity/KYC, warehouse and mobile workflows, currently as a Software Engineer at Growsari.

Side projects

  • BakeBoard, an order and production tracker for home bakers
  • BedderDeals, a hotel booking UI
  • NearMe
  • Coffee Break, short engineering articles
Book a 30-min call (opens Calendly in a new tab)Or email me about it

03 · Live configurator

Feel the difference.

Choose a feel and a duration, or pull the handles yourself. The button replays with your timing, and the faint copies show where it was at each step.

Linear

Your curve

Specimen. The real button is in the contact panel.

Each tick is one twelfth of the duration. Close ticks mean slow, wide ticks mean fast.

Your timing as CSS

transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);

04 · Before / after

Same card, two passes.

Both sides are the same markup, rendered live in this page. Only the styling and the motion differ.

Timing curve: Calm, 400 milliseconds.

Before: browser defaults, no motion

After: designed, with your timing

Not a screenshot and not a client result.

05 · Guided discovery

Build a brief in three steps.

Your earlier choices are filled in. Change anything. Nothing is sent until you send it from your mail app.

Timing curve: Calm, 400 milliseconds.
  1. What do you need?
  2. How should it feel?
  3. When, and anything else?

Email me with what you need, how it should feel, and when you'd like to start.

Email contact@alcorcon.dev

Studies

More from the lab.

Standalone studies, each a small tool you can try. Newest first.

The person behind the lab

I'm Jhay Jhay Alcorcon, a frontend engineer and currently a Software Engineer at Growsari. For about five years I've built production interfaces for logistics, identity/KYC, warehouse and mobile workflows, mostly with React, Next.js, MUI and Node. CofeeUI is where my own work lives. Outside the day job I build small things to learn:

  • BakeBoard, an order and production tracker for home bakers
  • BedderDeals, a hotel booking UI
  • NearMe
  • Coffee Break, short engineering articles
  • Website Hub, creative web experiments and landing pages, including this lab.

Like how these move? Book a 30-min call (opens Calendly in a new tab)