Browse the six catalogs
Backgrounds, heroes, text effects, buttons, controls, widgets. Open each page, scroll, see the components live.
PBG Consulting · Component Catalog
Every PBG site starts
here.
Every PBG site starts
here.
Browse
Six catalogs, thirty seven premium components. Pick the ones you love by reference code, send them to us, and we build your site from confirmed taste. No mood boards, no guessing.
How it works
Pick by reference code. We build the rest.
No more endless calls about what kind of button you want. Browse the catalog like a menu, write down the codes that feel like your brand, send the list. The build starts from confirmed taste.
Write down the codes
Every component has a code. Note the ones you like. Example: BG 03, HR 02, BT 04, WG 06.
Send the list
Use the shortlist tool below or email us directly. Add any notes about copy, colors, or brand voice.
We build your site
Premium production from confirmed taste. Theme aware, bilingual, ready to deploy on Cloudflare.
Catalog 01 · Backgrounds · BG
Six backgrounds that set the room.
Every PBG page begins with the air around the words. Pick a mesh, a shader, a stream of paths, a quiet gradient. Each one is premium and copy paste ready.
6 backgrounds in this catalog
Open full Backgrounds catalog
Featured · BG 05
Aurora Shader, the signature.
The shader running behind the hero you just scrolled past is BG 05. Volumetric aurora rendered in three.js, three theme tinted color stops, soft motion, no audio. The widest visual range in the catalog.
BG 01
Mesh Gradient
A trio of soft radial pools rotating against each other. Cheap on GPU, expensive looking.
CSS onlyOpen
BG 02
Plasma Grid Shader
A WebGL plasma flowing across a faint grid, retuned to PBG warm gold so it reads as us.
WebGLOpen
BG 03
Liquid Aurora
Three blobs that morph and rotate slowly. Quiet enough to sit under long form copy without competing.
CSS onlyOpen
BG 04
Animated Paths
Four pattern families on rotation: neural lattice, organic flow, geometric grid, slow spirals.
SVGOpen
BG 05
Aurora Shader
A volumetric aurora rendered in three.js. Three theme tinted color stops. The widest visual range.
WebGLOpen
BG 06
Elegant Streaks
Skewed light beams, a dot grid, a soft halo. The most editorial of the six. Pair with serif heroes.
CSS onlyOpen
Catalog 02 · Heroes · HR
Five ways to open a page.
Four heroes plus an interactive 3D bonus. Each one is built for first impressions, tested at 60fps. The cinematic showpiece is the finale, pinned through several screen heights.
5 heroes in this catalog
Open full Heroes catalog
HR 01
Rotating Word
Classical structure, modern feel. The single rotating slot does the heavy lifting while the rest of the page stays still.
GSAPOpen
HR 02
Geometric Shapes
Tilted glass pills drift behind a gradient headline. Set the mood without a single photograph.
CSS onlyOpen
HR 03
Aether Particles
A canvas particle field with mouse repel. Reacts to the user before they read a word.
CanvasOpen
HR 04
3D Spline Scene
An interactive 3D scene rendered directly in HTML. For a product hero, a brand mascot, or one beat of wonder.
SplineOpen
HR 05
Cinematic Scroll Hero
The finale. A pinned timeline that delivers a tagline, a rising card, a tilting phone, a counting metric, two glass badges, and a final pullback.
GSAPOpen
Catalog 03 · Text Effects · TX
Five ways to frame a word.
Headlines and key phrases deserve more than a sans serif. Each effect here is small and fast. Use them sparingly. One per page is usually enough.
5 text effects in this catalog
Open full Text Effects catalog
TX 01
Text Rotate
Per character spring entry cycles through a list. Excellent for product positioning and hero subheads.
GSAPOpen
TX 02
Typewriter
Types each phrase, deletes, and types the next. Calmer than text rotate, ideal for code and craft contexts.
JSOpen
TX 03
Highlight Reveal
A clip path retracts left to right, exposing the highlighted word. Use for one key promise per page.
CSS onlyOpen
TX 04
Handwritten Circle
A hand drawn ellipse circles the headline as you arrive. Personal, editorial, never digital.
SVGOpen
TX 05
Letter Hover Color
Each letter shifts color as the pointer brushes past. Quietly interactive, never distracting.
CSS onlyOpen
Catalog 04 · Buttons · BT
Seven buttons that earn the click.
Buttons translated from the curated reference list to vanilla HTML, CSS, and GSAP. Every one reskins to the active theme without changing markup.
7 buttons in this catalog
Open full Buttons catalog
BT 01
Hold and Release Confirm
For destructive actions. The label is locked, the press fills the bar, the action fires only when the bar completes.
GSAPOpen
BT 02
Glow Button
A primary call to action that broadcasts importance. The halo breathes, the conic ring rotates, a click ripple confirms the press.
CSS onlyOpen
BT 03
Gradient Expanding Menu
A pill row that hides its labels until you reach. Each pill expands from a small circle, fills with a gradient, reveals its name.
GSAPOpen
BT 04
Bookmark with Particle Burst
A delight micro interaction. Click to save, the icon fills, a halo flashes, and seven particles fly out radially.
GSAPOpen
BT 05
Animated Hamburger
A three line icon that morphs into an X. Three SVG paths driven entirely by aria expanded, no JS keyframing.
CSS onlyOpen
BT 06
Animated Generate Button
A primary action with a rotating gradient ring. Click to flip into a busy state, the ring keeps spinning.
CSS onlyOpen
BT 07
Bluetooth Key Button
A retro chunky physical button. The cap depresses on press, the LED lights up gold, a soft halo blooms under it.
CSS onlyOpen
Catalog 05 · Controls · CT
Six controls that feel honest.
Toggles, inputs, sliders, popovers. Every control reskins to the active theme. Built so the state is unmistakable at a glance.
6 controls in this catalog
Open full Controls catalog
CT 01
Shamayim Pattern Toggle
A tropical pattern track with a chunky gradient slider. The thumb glides, the entire control feels like a polished tile.
CSS onlyOpen
CT 02
Skeuomorphic Switch
A switch with depth. The cap rides on a recessed track. The cap turns to the active accent once on.
CSS onlyOpen
CT 03
Input with Animated Tags
Type a word then comma, enter, or space. The chip flies in, the input clears, the focus stays put.
GSAPOpen
CT 04
Assisted Password Confirmation
A live rule list. As the user types, each rule turns from a dim bullet to a satisfied check. A strength bar fills in time.
JSOpen
CT 05
Snappy Slider
Drag and the value pops above the thumb. The thumb scales up while active, the fill streams with an accent gradient.
CSS onlyOpen
CT 06
Popover
Click the anchor, a card slides up with a caret. Escape closes, click outside closes, focus moves to the close button.
JSOpen
Catalog 06 · Widgets · WG
Eight widgets that carry the story.
Composite components that anchor a page section. Pricing, checkout, carousels, photo grids, docks, tabs, device tilt, avatar stacks.
8 widgets in this catalog
Open full Widgets catalog
WG 01
Container Scroll Device Tilt
A device mock that lays flat at first, then rises toward the camera as the user scrolls. The body shimmers to keep the eye in motion.
GSAPOpen
WG 02
Expandable Tabs
Compact pills that reveal a content panel below. Only one open at a time. The selected pill takes the accent color.
JSOpen
WG 03
Floating Dock
A bottom dock that magnifies the icon nearest the cursor. The neighbors scale down as the active icon rises.
JSOpen
WG 04
Swipe Testimonial Carousel
A pointer drag carousel for testimonials. Mandatory bilingual hint and breathing chevrons stay visible.
GSAPOpen
WG 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.
GSAPOpen
WG 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.
GSAPOpen
WG 07
Interactive Checkout
A summary surface where quantity buttons drive the totals. The numbers count up and down, the CTA pulses.
GSAPOpen
WG 08
Avatar Group with Tooltips
Stacked avatars with a hover tooltip per face. The overflow chip carries the remainder of the team.
CSS onlyOpen
Your shortlist
Send the codes. We build the site.
Type the codes you liked, or click pick on any card above and watch them collect here. When the list is ready, send it to us. We start from confirmed taste.
Reference codes
Send to PBG