Workbench Motion
Your workshop clip, pinned full-bleed and driven by the scroll wheel.
Workbench Motion is the craft theme with the camera running. Add one short clip of your workshop and the home page pins it edge to edge, advancing it frame by frame as the reader scrolls while your headline, buttons, latest posts and shop notice arrive on top, one beat at a time. Without a clip it settles into a still, full-width photograph, which is a finished design too.
Who it's for
It is for makers who can film their own bench: a potter at the wheel, a luthier, a weaver, a beekeeper opening a hive. If you already shoot short vertical or landscape footage and want the home page to feel like a title sequence, this does that without any code. It is the wrong pick for a site with no footage and no plan to shoot any, where the plain Workbench hero does the same job with less weight, or for writers who want text to lead.
What makes it different
A clip that moves only when the reader does
The video has no play button and never runs by itself. Scroll position sets the playhead, smoothed so it keeps gliding for a beat after the reader stops, and the copy layers are driven by that same value. Scene and text therefore arrive together instead of two animations merely timed alike.
Four beats across one pinned scene
The stage stays fixed under the header while the page scrolls past it. First the headline and intro, then the two buttons while the headline drifts upward, then a strip of your three latest posts, and finally a short shop teaser. Neighbouring beats overlap slightly so they cross-fade rather than cut.
Finished with a still photograph
A site without footage gets a full-width poster hero with the headline, intro and buttons laid along its lower edge, and no scroll track at all. That path ships no script for the hero, because the stage is plain server-rendered markup before any clip exists.
Gentler on phones
Below 1024 pixels wide the pinned track shrinks from 360 to 220 screen-heights, so the sequence does not feel like work. Seeks are coalesced and take a coarser step on touch and narrow screens, the clip is primed on the first touch, and the poster stays visible until a frame has actually painted.
The workbench journal and shop beneath
After the pinned stage the page continues with three journal cards and a forest-green project band. The blog, posts, pages and shop use Workbench's bone paper and amber accents, and the shop lists goods in a three-column grid with category pills and optional hover pictures.
Product pages with a purchase button
A product opens on a gallery with a main picture and up to four thumbnails, a breadcrumb, the price and description, then Add to cart. When Stripe is connected an amber buy button sits beside it, and your feature list is printed in a dashed panel.
Page by page
- Home
- Pinned full-bleed stage with four timed beats, then journal cards and a forest project band.
- Blog
- Journal masthead, category pills, three-column cards and numbered pages, as in Workbench.
- Post
- Narrow article column with an initials byline, cover figure, tags, comments and a signup panel when enabled.
- Page
- Eyebrow, heading and a prose column under the same sticky header.
- Shop
- Goods count, pill filters and cards with a stock note and a second image on hover.
- Product
- Thumbnail gallery, price, add-to-cart and buy buttons, and a dashed feature list.
Customizing it
Global Design recolours the page: your background, text and primary choices stand in for bone, ink and forest, your accent replaces amber, and your fonts replace Bricolage Grotesque and Lora. Twenty-three wording slots cover the hero eyebrow, the footer and, unique to this theme, the three lines of the shop teaser. All can be edited in English and Arabic under Settings, General, Theme copy.
Honest limits
- Only one scene. The clip is scrubbed from its first frame to its last across the whole track, so it needs to be a single continuous shot with nothing important at the very end, and it works best when short.
- Visitors who allow motion begin loading the clip as soon as the page opens. Keep the file small; heavy footage makes the first scrub stutter on slow connections.
- The two later beats, the post strip and the shop teaser, exist only on the pinned track. Without a clip the hero holds the headline, intro and buttons alone, and posts appear in the section below.
- The hero is dark by design, with a scrim under bone-coloured text, while everything below is light paper. There is no dark mode for the rest of the site.
- The header magnifier opens the site's plain post-search page, but neither the blog nor the shop has its own search field or price filter. Several shop labels, such as All goods and the note ending sorted newest first, are fixed English.
- The pinned track lengthens the home page. On desktop it is 360 screen-heights tall, so a visitor scrolls a long way before reaching the journal cards.
Specifications
- Category
- Animation
- Price
- Included
- Plan availability
- Included in every VeloCMS plan
- Commerce-ready
- Yes
- Motion
- Yes
Good fit for
Frequently asked questions
What does the home page look like without a clip?
A full-width photograph taken from your hero image or newest post, with the headline, intro and two buttons over a dark gradient. It is complete as it stands and loads no hero script.
What do visitors with reduced motion see?
The static hero. Their system setting stops the clip from being attached, the scroll track is not built, and the copy sits in plain flow, so nothing moves on their screen.
Does the effect work on phones?
Yes, with a shorter track and coarser, coalesced seeking. The clip is primed on first touch, and the poster remains up until a real frame has painted, so a slow phone never shows a black rectangle.
Can I change the words shown during the scroll?
Yes. The eyebrow, the fine print, the label above the post strip and the three shop-teaser lines are theme-copy slots. Once you write a site description, the headline becomes your site name and the description becomes the intro line.
Is the rest of the site different from Workbench?
Not visually. The blog, posts, pages, shop and product pages match Workbench. The difference is the home hero: pinned and scroll-driven here, a static two-column poster there.