The Workshop

Don't take my word for it. Touch the work.

Every demo below is live and hand-coded. Break them, resize them, then look at the code.

12 live demos 0 frameworks 100% real source

Demo 12 · Typewriter The headline above types itself.

Your site needs this when your headline has three seconds to earn a fourth.

Featured · Demo 01

Your logo, built from
moving particles.

Every dot is its own particle, pulled back into the W by a spring. Drag across it or tap it and they scatter, then find their way home.

JavaScriptCanvas

The particle demo couldn't start in this browser. The rest of the page still works.

Your site needs this when your brand should be the thing people remember.

02

Before / After Slider

JavaScriptCSS

Drag across the frame. Same business, same content, ten years apart.

This demo couldn't start in your browser. The rest of the page still works.

Your site needs this when your work speaks louder than your pitch.

03

Live Speed Meter

JavaScriptPerformance API

How fast this page loaded on your device, measured just now. No made-up numbers.

–Full page load
Measuring…
First byte
–
Page ready
–
Main content
–
Page weight
–
Files loaded
–
Connection
–

Your browser doesn't share load timings, so there's nothing honest to show here.

Your site needs this when a slow page is losing people before they see a thing.

04

Instant Price Estimator

JavaScriptForms

A lawn care company's monthly estimate that updates as you change it.

Northline Lawn Co. Example pricing
6,000 sq ft
How often
Add-ons
Estimated monthly $0 – $0 about $0 per visit

This demo couldn't start in your browser. The rest of the page still works.

Your site needs this when customers want a ballpark before they'll pick up the phone.

05

Quote Form to Dashboard

JavaScriptSupabasePostgres

Fill out the customer's form, then watch it land in the owner's dashboard. Fake details are fine.

IronShield Roofing Request a quote

Owner dashboard Connecting…
0Requests
0New
0Won

    This demo couldn't start in your browser. The rest of the page still works.

    Your site needs this when a broken contact form is silently costing you customers.

    Same stack as the Courage To Claws quote form and admin dashboard.

    08

    3D Flip Cards

    CSSJavaScript

    Tap a card to turn it over. The image up front, the details on the back.

    This demo couldn't start in your browser. The rest of the page still works.

    Your site needs this when you want visitors to touch your content, not scroll past it.

    Same technique as the Courage To Claws project gallery.

    09

    Responsive Preview

    CSSContainer Queries

    Drag the orange handle. One layout, rebuilding itself for every screen size.

    900px Desktop
    Ember & OakMenuVisitOrder

    Coffee & Community.

    Honest ingredients and the best espresso in the neighborhood.

    View Menu
    EspressoPulled to order
    PastriesBaked at 5 AM
    CateringOffice orders

    Come sit for a while.

    412 Main St, Sauk Centre
    Open daily from 6:30 AM

    Get directions
    Ember & OakInstagram · Facebook · (320) 555-0110

    This demo couldn't start in your browser. The rest of the page still works.

    Your site needs this when half your customers are on their phones. (They are.)

    10

    Open Now Badge

    JavaScriptTime Zones

    Checks the clock in the business's own time zone, wherever the visitor is.

    Ember & Oak CafeSauk Centre, MN · Central Time
    Checking…

      This demo couldn't start in your browser. The rest of the page still works.

      Your site needs this when customers keep calling just to ask if you're open.

      11

      Micro-Interactions

      CSSJavaScript

      Press, toggle, save, copy. The small details that make a site feel expensive.

      Press
      Toggle
      Save
      Copy

      This demo couldn't start in your browser. The rest of the page still works.

      Like what you touched?

      Need one of these
      on your site?

      Let's Talk