$
49
per month
- Unlimited scenes
- Brand asset hosting
- Priority Slack support
Interactive Catalog 03
Widgets that carry the story.
Eight composite widgets translated from the curated reference list to vanilla HTML, CSS, and GSAP. Flip the theme at the top right to see every widget reskin to the active palette.
WG-01 01
Container Scroll Device Tilt
A device mock that lays flat at first, then rises toward the camera as the user scrolls. The body of the screen shimmers to keep the eye in motion.
When to use. Product hero screens where the asset deserves a film entry. SaaS landing pages, fitness apps, dashboards.
Why it works. The scroll becomes the camera. The user feels the entrance instead of just seeing it.
WG-02 02
Expandable Tabs
Compact pills that reveal a content panel below. Only one open at a time. The selected pill takes the accent color so the user always knows where they are.
Tap a pill to expand the panel
When to use. Compact account screens, settings categories, FAQs, feature matrices, anywhere lists need a quick reveal.
Why it works. The pill stays small until the user commits. The expanded state earns the room it takes.
WG-03 03
Floating Dock
A bottom dock that magnifies the icon nearest the cursor. The neighbors scale down as the active icon rises. A tooltip surfaces the label.
Hover or touch the dock to magnify
When to use. Dashboards, productivity apps, marketing pages with multiple primary destinations.
Why it works. The magnification is a constant signal of selection. The user always knows what they are about to click.
WG-04 04
Swipe Testimonial Carousel
A pointer-drag carousel for testimonials. Mandatory bilingual hint and breathing chevrons stay visible so the user never has to guess.
When to use. Testimonial walls, case study highlight reels, mobile reviews, repeating content where order does not matter.
Why it works. The persistent hint removes the discoverability problem. The chevrons breathe so the user notices them even mid scroll.
WG-05 05
Animated Photo Grid
A nine tile grid with a visible zoom hint. Click any tile and it grows to fill the frame while the others fade. Click the close to return to the grid.
Tap a tile to zoom, tap close to exit
When to use. Portfolio reels, gallery views, product family screens, anywhere a single thumbnail needs to become a hero.
Why it works. The persistent zoom badge removes the guesswork. The user knows the tile is interactive before they reach it.
WG-06 06
Pricing with Animated Numbers
Toggle monthly to yearly and the digits tween between values. The CTA stays bold so the user can compare and commit in one move.
When to use. SaaS pricing pages, course tiers, subscription plans. Wherever a billing cycle changes the headline number.
Why it works. The digits tween instead of flipping. The eye stays on the price the entire time the cycle changes.
WG-07 07
Interactive Checkout
A summary surface where quantity buttons drive the totals. The numbers count up and down, the CTA pulses, the entire object reads as ready to be tapped.
PB
PBG Scene License
Annual seat, all scenes included
1
Subtotal$199
Tax$16
Total$215
When to use. Single product checkout, course enrollment, donation surfaces. Anywhere a quantity touches a total.
Why it works. The tweening totals make the cost feel transparent and immediate. The pulsing CTA tells the user the work is one tap away.
WG-08 08
Avatar Group with Tooltips
Stacked avatars with a hover tooltip per face. Use this direction for the Team Ops Dashboard. The overflow chip carries the remainder of the team.
Hover an avatar, the tooltip lifts
When to use. Team rosters, shared documents, project members, dashboard headers. The Team Ops Dashboard build leans on this pattern.
Why it works. The stack reads as a group at a glance and each face still earns identity on hover.