Allen Creative Logo

Interactive playground

Don't take our word for the craft. Play with it.

A living catalog of the interface we build — overlays, forms, charts, media, and motion you can actually grab, drag, click and break. Every piece is hand-built and brand-able. Pick a category and dive in.

01Overlays

Overlays & layering

Drawers, dialogs, command palettes and toasts — the surfaces that appear on top, with motion that makes them feel weightless.

Drawers

Slide-out panels from any edge

Modal dialog

Backdrop blur, spring entrance

Command palette

⌘K to open, type to filter, arrows to navigate

⌘K

Toast notifications

Stack, auto-dismiss, swipe away

Toasts stack in the bottom-right and clear themselves.

02Forms

Forms & validation

Inputs that react as you type — real validation, multi-step flows, and the little affordances that make a form pleasant instead of a chore.

Live validation

Real-time, powered by zod

We'll never share it.

8+ characters, a number and a symbol.

Floating labels

Labels that get out of the way

Multi-step form

Direction-aware step transitions

1
Account
2
Profile
3
Review

Verification code

Auto-advance, paste-aware

OTP

Paste or type your 6-digit code

File dropzone

Drag, drop, watch it upload

Controls

Sliders, segments, switches

Budget42%
42
Billing
Email notifications
03Data viz

Data, made beautiful

Charts that animate in, numbers that count up, progress that fills. The same library we reach for on dashboards and reporting tools.

Revenue trend

Gradient area, animated, switchable range

recharts

Total revenue · 12M

$365.3k159.9%

Channels

Hover to inspect

recharts

Goals

Animated progress rings

motion
0%
Revenue
0%
Signups
0%
Retention

KPIs

Numbers that count up

MRR12.4%
$0
Active users8.1%
0
Churn0.6%
0.0%
NPS4%
0.0
04Media

Media & galleries

A custom video player, photo carousels, a lightbox and a before/after slider — rich media handled with the same care as everything else.

Video player

Custom controls, scrub, fullscreen

0:00 / 0:00

Photo carousel

Embla-powered, peek + dots

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Lightbox gallery

Click to expand, shared-element morph

Before / after

Drag to compare

AfterAfter
Before
Before
05Motion

Signature motion

The fun stuff. Crash through the letters, drag a magnetic cursor, watch things reveal on scroll. This is where a site stops feeling static.

Crash into the letters

Move your cursor through the text

motion

CRASH INTO ME

Magnetic buttons

They reach out to your cursor

Hover me
And me
Pull

3D tilt card

Pointer-driven 3D

Allen Creative

•••• 4242

Tilt me around

Scroll reveal

Reveals as you scroll

↓ Scroll inside this panel ↓

1

Reveal block 1

Fades, lifts and scales in as it enters the frame.

2

Reveal block 2

Fades, lifts and scales in as it enters the frame.

3

Reveal block 3

Fades, lifts and scales in as it enters the frame.

4

Reveal block 4

Fades, lifts and scales in as it enters the frame.

5

Reveal block 5

Fades, lifts and scales in as it enters the frame.

6

Reveal block 6

Fades, lifts and scales in as it enters the frame.

7

Reveal block 7

Fades, lifts and scales in as it enters the frame.

You made it to the bottom.

Typewriter

Types, deletes, repeats

We help teams

 

Confetti

Click for a celebration

And this is just the demo.

Every piece here is hand-built, tuned, and yours to brand. Imagine it shaped around your product.