Animations
Click any card to replay. Copy the prompt tag and paste it into Claude Code.
How to use: Click the
"Animate the service cards with fade-up, staggered 100ms apart, 0.6s duration."
prompt tag on any card to copy it, then paste into Claude Code like:"Animate the service cards with fade-up, staggered 100ms apart, 0.6s duration."
Entrance Animations
click to replay
Fade Up
fade-up
Element rises from below while fading in. Most versatile — use on cards, headings, CTAs.
click to replay
Fade In
fade-in
Pure opacity reveal. Subtle and clean — great for background images and full sections.
click to replay
Scale Up
scale-up-center
Pops in from the center. Great for icons, pricing cards, feature highlights.
click to replay
Slide In Left
slide-in-left
Enters from left. Use on left-column content in two-column layouts.
click to replay
Slide In Right
slide-in-right
Enters from right. Pair with slide-in-left for opposing columns.
click to replay
Bounce In
bounce-in
Playful overshoot on entry. Good for icons, badges, CTA buttons on fun/casual sites.
click to replay
Elastic
elastic-scale
Stretches past its final size then snaps back. More dramatic than bounce — use sparingly.
FJMedia
click to replay
Blur In
blur-in
Text or image sharpens into focus on entry. Premium feel — great for hero headings.
click to replay
Flip In
flip-in-x
Card rotates in on the X axis. Dramatic — use on portfolio cards or feature reveals.
Your Brand Here
click to replay
Wipe Reveal
wipe-reveal
Text or image wipes in from left like a curtain pull. Very premium — great for hero text reveals.
Looping Animations
Float
float
Gentle up-down bob. Use on hero images, icons, or decorative elements to add life.
Pulse
pulse
Subtle breathing scale. Draw attention to a CTA button or live indicator dot.
Shimmer / Skeleton
shimmer
Gold light sweeps across an element. Use as loading skeleton or accent on cards.
Spinner
spinner
Classic loading spinner in gold. Use during API calls, form submissions, page loads.
Stagger Pattern
click to replay
Staggered Cards
stagger 100ms
Cards animate in one after another. Signature pattern for service grids, pricing cards, testimonials.
More Entrance Animations
click to replay
Slide Down
slide-down
Drops in from above. Great for dropdown menus, notification banners, nav reveals.
click to replay
Zoom In (Ken Burns)
zoom-in
Starts zoomed in and scales down to normal. Cinematic feel for hero images and backgrounds.
click to replay
Swing In
swing-in
Card swings down from top like a hinged door. Great for dropdown cards, notices, feature reveals.
click to replay
Rubber Band
rubber-band
Element stretches and snaps back. Attention-grabbing — use on badges, sale tags, or CTA buttons.
click to replay
Jello
jello
Wobbly skew effect like jello. Playful and fun — bakeries, kids brands, casual sites.
click to replay
Shake
shake
Quick horizontal shake. Use for form validation errors, wrong password, or attention cues.
Text Animations
Typewriter
typewriter
Text types out character by character with blinking cursor. Premium for hero headings and intros.
FJMedia
click to replay
Text Mask Reveal
text-mask-reveal
Text reveals left-to-right with clip-path mask. Sleek and modern — hero headings and brand names.
Split Text
split-text
Two halves of text slide in from opposite sides and meet. Great for brand names and taglines.
click to replay
Letter Stagger
letter-stagger
Each letter fades/rises in one by one. GSAP SplitText pattern — premium hero headings.
click to replay
Word Stagger
word-stagger
Each word in a sentence fades up sequentially. Less intense than letter stagger — good for subtitles.
FJMedia
Gradient Text Shift
gradient-text-shift
Text color cycles through a gradient. Eye-catching for hero headings or featured labels.
Attention & Micro-interactions
Heartbeat
heartbeat
Double-pulse like a heartbeat. Use on notification dots, live indicators, or featured badges.
Border Draw
border-draw
Border draws itself around the element one side at a time. Premium card reveal or focus state.
Glow Pulse
glow-pulse
Gold glow breathes in and out. Use on featured cards, active states, or CTA buttons.
Morph Blob
morph-blob
Shape morphs between organic blob forms. Modern background accent or decorative element.
Gentle Tilt
gentle-tilt
Subtle 3D perspective tilt. Adds depth to cards, images, and hero elements.
Marquee / Infinite Scroll
marquee-scroll
Text or logos scroll infinitely. Use for client logos, services, or social proof strips.
Reveal Patterns
Expanded content
Details appear here
Accordion Unfold
accordion-unfold
Content unfolds from max-height:0. Standard for FAQ accordions, expandable details.
click to replay
SVG Line Draw
svg-line-draw
SVG stroke draws itself on scroll. Use for decorative lines, borders, icons, or underlines.
Gradient Wipe
gradient-wipe
Background gradient slides across on reveal. Use on section backgrounds, cards, or CTAs.
Flip Card (Front/Back)
flip-card
Card flips to reveal back content on hover/click. Team bios, feature reveals, pricing details.
F
J
M
e
d
i
a
X
K
Q
z
w
p
r
click to replay
Text Scramble / Decode
text-scramble
Characters cycle through random letters before settling into final text. Tech-forward hero text effect.
Counter Odometer
counter-odometer
Numbers roll like a slot machine, digit by digit. Stats sections, pricing counters, dashboard figures.
Stagger Scale-In
stagger-scale-in
Grid items pop in from scale(0) with cascading delays. Icon grids, feature blocks, portfolio tiles.
Motion & Compound Patterns
Scroll Reveal
Scroll Trigger + Fade Up
scroll-reveal-fade-up
Elements animate in when they enter the viewport. Your FJMedia standard using GSAP ScrollTrigger.
Counter
48h
delivery time
Number Counter
count-up
Number counts up from 0 to target on scroll. Use on stats, pricing, social proof numbers.
Stagger Bars
stagger-bars
Bars grow up sequentially. Use on chart sections, skill bars, or comparison visuals.
Progress Bar Fill
progress-fill
Bar fills to a percentage on scroll. Use for skill levels, project progress, loading states.
Logo / Service Marquee
marquee-strip
Infinite horizontal scroll. Use for client logos, services strip, or trust indicators.
hover to see
Parallax Layers
parallax-layers
Background and foreground move at different speeds on scroll. Adds depth to hero and section backgrounds.
Stagger Grid
stagger-grid
Grid items appear in sequence (left-to-right, top-to-bottom). Portfolio grids, gallery, features.
1
2
3
Step Progress
step-progress
Numbered steps with connecting lines that fill on scroll. Process sections, onboarding flows.
Top
Stacked Card Reveal
stacked-reveal
Cards stack behind each other and reveal in sequence. Testimonials, pricing tiers, feature cards.
Hover Effects
Hover over each demo. Copy the prompt tag to reference in Claude Code.
Lift on Hover
hover-lift
Card rises 6px with a shadow on hover. The go-to for service/pricing cards.
Gold Glow
hover-glow-gold
Gold shadow radiates out on hover. Use on featured cards, CTA buttons, or portfolio items.
Scale on Hover
hover-scale
Element scales up slightly on hover. Use on images, icons, gallery items.
Button Fill
button-fill-gold
Outline button fills gold on hover. Classic CTA style for dark backgrounds.
Get Started
Button Expand
button-expand
Button slightly scales and letter-spacing widens on hover. Adds energy to solid CTAs.
View Our Work
Underline Reveal
underline-reveal-gold
Gold underline slides in on hover with color change. Use on nav links and text CTAs.
Service Card
Border Highlight
border-highlight-gold
Border intensifies to full gold on hover with background tint. Elegant for service cards.
Image Overlay
image-overlay-reveal
Tinted overlay with CTA text appears on hover. Standard for portfolio/work grid items.
Advanced Hover Effects
3D Tilt
hover-tilt-3d
Card tilts in 3D perspective on hover. Modern portfolio sites, feature cards.
Underline Slide
hover-underline-slide
Gold underline grows from left on hover. Clean nav links and text CTAs.
Shine Sweep
hover-shine-sweep
Light streak sweeps across the card on hover. Luxury feel for pricing and feature cards.
Button Wipe Fill
button-wipe-fill
Gold fill wipes across the button from left. More dramatic than instant fill.
Image Zoom on Hover
hover-image-zoom
Image scales up inside its container on hover. Standard for portfolio grids and gallery items.
📷
🔗
✉️
Social Icon Pop
hover-social-pop
Social/icon circles lift and fill on hover. Standard for footer social links.
Card
Gradient Border Shift
gradient-border-shift
Border gradient angle rotates smoothly on hover. Premium feel for featured cards and CTAs.
Text Reveal on Image
text-reveal-image
Image desaturates while hidden text fades in over it on hover. Portfolio grids, gallery items.
Front
Stacked Card Peek
stacked-card-peek
Cards behind the front card fan out on hover to reveal depth. Testimonials, team bios, pricing tiers.
Typography Styles
Reference these styles by name when prompting Claude Code about headings and text.
We Build Websites
That Convert.
That Convert.
Editorial Hero
editorial-hero
Cormorant Garamond large, italic keyword in gold. Premium and confident.
Web Design
Built for Winnipeg Businesses
Label + Heading
label-heading
Small gold uppercase label above the main heading. Great for section openers.
$0
upfront cost to you
upfront cost to you
Big Stat
big-stat
Giant number with small label below. Use in stats sections, pricing, or social proof.
"Made the whole process
so smooth."
— Sarah & Mike T.
so smooth."
— Sarah & Mike T.
Testimonial Quote
testimonial-quote
Italic serif quote with gold left border and attribution. Clean and trustworthy.
01
Discovery Call
Ghost Number
ghost-number
Giant faded number behind real content. Great for process steps or numbered sections.
Price List
price-list-serif
Serif item names with gold prices, separated by thin lines. Elegant for pricing breakdowns.
More Typography Patterns
OUTLINE
TEXT
TEXT
Outlined / Stroke Text
outlined-text
Text with stroke, no fill. Modern and editorial — hero headings, decorative backgrounds.
Gradient
Heading
Heading
Gradient Heading
gradient-heading
Text filled with gradient. Use sparingly on hero headings or featured labels. Gold-to-cream is safe.
const brand = "FJMedia";
const speed = "48 hours";
const risk = null;
const speed = "48 hours";
const risk = null;
Monospace Accent
monospace-accent
Code-style monospace for technical or modern feel. Good for stats, features, tech brands.
STARTING AT
$200
Mixed Weight Pair
mixed-weight
Ultra-light label next to bold number or heading. Creates visual hierarchy through weight contrast.
$5,000
$300
Save 94% vs. traditional agencies
Strikethrough Price
strikethrough-price
Crossed-out old price next to new price in gold. Classic for sales, comparisons, pricing pages.
We build websites that convert visitors into paying customers for Winnipeg businesses.
Drop Cap
drop-cap
Oversized first letter in gold. Editorial and premium — about sections, blog intros, long-form content.
Our Process
Divider Label
divider-label
Centered label with horizontal lines on both sides. Section separators, used on FJMedia agency site.
Custom Website
Hand-coded, mobile-ready,
tailored to your brand.
tailored to your brand.
SEO Setup
Google indexing, meta tags,
local search optimization.
local search optimization.
Sans-Serif Service List
sans-service-list
Bold name + light description pairs. Clean for services, features, or process steps.
— ESTABLISHED —
Winnipeg, MB
— SINCE 2024 —
Serif + Sans Lockup
serif-sans-lockup
Serif heading sandwiched between tracked sans-serif labels. Classic for local brands, restaurants, barbershops.
NEW Now offering monthly retainers
LIVE Portfolio updated weekly
SOLD March intake full
LIVE Portfolio updated weekly
SOLD March intake full
Inline Status Badges
inline-badges
Colored pill badges inline with text. Use for status indicators, feature labels, or announcements.
We make beautiful websites
Highlight / Marker Effect
highlight-marker
Gold highlight behind specific words like a marker pen. Great for emphasizing key phrases in headings.
Section
Content area here
Vertical Text / Rotated Label
vertical-text-label
Text rotated 90 degrees as a section label. Used on editorial and portfolio sites for visual sophistication.
We make beautiful websites
Handwritten / Script Accent
script-accent
Cursive word inside sans-serif heading. Popular for bakeries, florists, wedding vendors, and beauty brands.
Page Layouts
Structural blueprints. Reference by name when describing page structure to Claude Code.
Full-Width Hero
full-width-hero
Nav + large centered hero text + two CTA buttons. Your FJMedia homepage structure.
Split Hero (Text + Image)
split-hero
Text left, image or card right. Great for realtor, service, and personal brand sites.
3-Column Card Grid
3-col-card-grid
Three equal columns. Use for services, features, team members. Stacks to 1-col on mobile.
Sidebar + Content
sidebar-content
Left sidebar nav with main content area. Good for tools, dashboards, and reference pages.
More Layout Patterns
Zig-Zag (Alternating)
zigzag-layout
Text/image alternates sides each row. Classic for services, about pages, feature showcases.
Bento Grid
bento-grid
Mixed-size cards in an asymmetric grid. Trending for portfolios, features, and dashboards (Apple style).
Masonry Gallery
masonry-gallery
Pinterest-style staggered columns. Photographers, portfolios, gallery pages. CSS columns or JS.
1
2
3
Horizontal Timeline
timeline-horizontal
Numbered circles with connecting lines. Process steps, onboarding, project timeline. Used on FJMedia.
Vertical Timeline
timeline-vertical
Vertical line with dots and content at each stop. Project history, about page milestones.
2x2 Feature Grid
2x2-feature-grid
Four equal cards in a 2x2 grid. Why-us sections, feature highlights, comparison quadrants.
50/50 Split Screen
split-screen-50-50
Two equal halves, different backgrounds. Compare before/after, two options, or text + image.
Tab Content Layout
tab-content-layout
Tab buttons above, content below swaps on click. Used on FJMedia ops, service sections, dashboards.
Single-Column Long Scroll
single-column-scroll
One centered column with generous whitespace. The most common small-business layout, optimized for mobile.
Overlapping / Offset Grid
overlapping-grid
Cards intentionally overlap with negative margins. Creates depth and editorial tension for creative sites.
Full-Width + Contained Alt
fullwidth-contained-alt
Sections alternate between edge-to-edge backgrounds and contained widths. Creates visual rhythm.
Sticky Sidebar + Content
sticky-sidebar-content
Left sidebar stays pinned while right content scrolls. Service details, menus, contact info beside a form.
Hero Section Styles
The first thing visitors see. Reference by name to define the hero style for any client site.
Winnipeg Web Design
We Build Websites
That Convert
That Convert
Book a Call
Dark Centered
dark-centered-hero
Navy background, centered editorial heading, gold CTA. Current FJMedia style.
Your Winnipeg
Home Story
Starts Here.
Home Story
Starts Here.
Licensed Realtor
Light Split (Realtor Style)
light-split-hero
Cream background, text left, photo right. Warm and personal.
Dark + Radial Glow
dark-radial-glow-hero
Navy bg with subtle gold radial glow behind the heading. Adds depth without images.
Image Background + Overlay
image-overlay-hero
Full-bleed background image with dark overlay. Great for food, events, photography.
More Hero Styles
Animated Gradient BG
animated-gradient-hero
Subtle gradient shifts behind the hero text. Modern and alive without being distracting.
Minimal Text-Only
minimal-text-hero
No images, no effects — just centered text on dark. Maximum sophistication through restraint.
Split Hero + Stats Row
split-hero-stats
Text + image with stat counters below heading. Detailers, contractors, service businesses with numbers to show.
Ghost Watermark Hero
ghost-watermark-hero
Giant faded brand name behind the real content. Bold and confident — great for portfolio sites.
Before / After Split Hero
before-after-hero
Side-by-side comparison in the hero. Powerful for agencies, detailers, renovators — anything with transformations.
Floating Particles Hero
floating-particles-hero
Soft floating circles in background. Adds life without distraction. Tech, creative, and modern brands.
Video Background Hero
video-bg-hero
Full-viewport hero with looping video behind text and CTA. Restaurants, venues, barbers, event spaces.
Full Screen
100vh hero
Scroll Indicator Hero
scroll-indicator-hero
Full-viewport hero with animated scroll-down indicator at the bottom edge. Signals more content below.
We build
Rotating Words Hero
rotating-words-hero
Hero heading where one word cycles through alternatives. High client demand for dynamic-feeling headlines.
Diagonal / Angled Hero
diagonal-hero
Hero with angled bottom edge via clip-path. Adds visual energy without complexity.
Card Styles
Reference these when describing service cards, pricing cards, or testimonial layouts.
Custom Website
Hand-coded, mobile-ready, tailored to your brand.
Gold Border Card
gold-border-card
Dark card with subtle gold border and 2px gold top accent line.
Pricing Card
pricing-card-gold-top
Gold top bar, label, large price, description. Current pricing section style.
"Delivered in 5 days, exactly what we needed."
— Sarah & Mike T.
Testimonial Card
testimonial-card
Gold left border, italic serif quote, gold attribution. Clean and credible.
Zero Risk
Pay only after you approve.
Icon + Feature Card
icon-feature-card
Small icon box left, title + description right. Great for "Why Us" sections.
More Card Styles
Glass Card
Frosted glass effect with blur.
Glassmorphism Card
glass-card
Frosted glass with backdrop-filter blur. Modern, trendy — over images or gradient backgrounds.
Gradient Border
Gold gradient outline.
Gradient Border Card
gradient-border-card
Background gradient trick for gradient borders. Featured cards, pricing highlights, CTAs.
Image-Top Card
image-top-card
Image/preview on top, content below. Portfolio items, blog posts, project showcases. Used on FJMedia.
Horizontal Card
horizontal-card
Image on left, content on right in a row. Blog lists, team members, service items.
48h
Average Delivery
Stat / Metric Card
stat-metric-card
Big centered number with label below. Stats sections, dashboards, social proof. Used on FJMedia.
J
James Fehr
Founder
Web designer & developer based in Winnipeg.
Team Member Card
team-member-card
Circular avatar, name, role, and short bio centered. Team pages, about sections.
01
Book a Call
15-minute call to discuss your business needs.
Process Step Card
process-step-card
Numbered circle + title + description. How-it-works sections, onboarding steps. Used on FJMedia.
Portfolio Card + Overlay
portfolio-card-overlay
Image with hover overlay showing project details + link. Used on FJMedia portfolio section.
Comparison Card (vs.)
comparison-card-vs
Two-column split comparing two options. Agency vs FJMedia, before/after, plan comparisons.
Wedding Social
Polaroid / Tilted Card
polaroid-card
Slightly rotated card with shadow. Scrapbook feel — used on Diego & Andrea wedding social site.
Badge / Ribbon Card
badge-ribbon-card
Card with corner ribbon reading "Popular" or "Best Value". Standard on pricing pages.
★★★★★
"Best investment we made for our business."
— Sarah K.
Testimonial Card with Stars
testimonial-stars
Quote card with 5-star visual rating. The most common review format clients request.
Classic Burger
$14
Lettuce, tomato, house sauce
Caesar Salad
$11
Romaine, croutons, parmesan
Menu Item Card
menu-item-card
Restaurant-style: name, description, price with dotted leader. Essential for food businesses.
⚙
Web Design
Custom sites built for conversions.
Learn More →
Service Card with CTA
service-card-cta
Icon, title, description, and link at bottom. The most frequently requested card type for small businesses.
Color Palettes
Pre-built palettes for different client vibes. Reference by name.
FJMedia Default
theme-fjmedia
Navy + Gold + Cream. Premium, confident, masculine. Your agency standard.
Monochrome Dark
theme-mono-dark
Black + White. Ultra-clean, modern. Barbers, photographers, minimalist brands.
Warm Cream
theme-warm-cream
Cream bg + Gold accents + Dark text. Warm, approachable. Bakeries, realtors, spas.
Tech Blue
theme-tech-blue
Slate + Blue accents. Clean and professional. SaaS, tech, consulting.
More Color Themes
Rose Gold + Dark
theme-rose-dark
Deep navy + rose gold accents. Feminine luxury — beauty salons, bakeries, florists, photographers.
Forest Green
theme-forest
Dark green + bright green accent + cream. Organic, natural — landscapers, wellness, eco brands.
Earth Tones
theme-earth
Warm tan + brown + dark chocolate. Rustic, grounded — coffee shops, woodworkers, boutiques.
Red + Black
theme-red-black
Black + red accent + white. Bold and aggressive — barbers, auto, fitness, martial arts.
Deep Purple
theme-purple
Dark purple + lavender accent. Creative, artistic — studios, DJs, nightlife, creative agencies.
Neon Gradient
theme-neon
Dark bg + neon cyan/purple gradient accent. Electric, modern — gaming, music, nightlife, tech startups.
Sunset Warm
theme-sunset
Light warm bg + orange accent + dark text. Friendly, energetic — restaurants, food trucks, events.
Emerald + Gold
theme-emerald-gold
Dark navy + emerald green + gold. Luxury with a twist — high-end service, finance, real estate.
Soft Pink · Lavender · Mint · Butter
Pastel / Soft
theme-pastel-soft
Soft pink, lavender, mint. For bakeries, beauty, wellness, and feminine brands.
Terracotta · Sage · Linen · Bark
Terracotta + Sage
theme-terracotta-sage
Warm clay + muted green. Trending for organic, natural, and wellness brands.
Deep Navy · Ocean · Aqua · Sand
Ocean / Coastal
theme-ocean-coastal
Navy to aqua with sandy neutrals. Popular for coastal businesses and travel.
Black · White · Vivid Yellow · Charcoal
High Contrast Accessibility
theme-high-contrast
WCAG AAA compliant. Black + white + vivid accent for maximum readability.
Section Patterns
Full-width section blueprints. Reference by name to quickly scaffold common page sections.
Social Proof & Trust
What Clients Say
"Best investment for my business."
— Sarah T., Bakery Owner
Testimonial Carousel
testimonial-carousel
Single testimonial with dot pagination. Auto-rotates or swipeable. Standard for social proof sections.
Results
48h
Delivery
$0
Upfront
100%
Satisfaction
Stats / Numbers Bar
stats-bar
3-4 big numbers in a row with labels. Count-up on scroll. Used on FJMedia hero and agency sites.
Trusted By
Logo Trust Strip
logo-trust-strip
Row of client/partner logos, muted. Optional marquee scroll. Builds credibility instantly.
★★★★★
4.9 / 5.0
Based on 47 Google Reviews
Review Score Block
review-score-block
Star rating + score + source. Links to Google/Yelp. Instant trust for local businesses.
Hours
Monday - Friday9am - 6pm
Saturday10am - 4pm
SundayClosed
Hours / Schedule Block
hours-schedule
Business hours in two-column layout with alternating rows. Essential for restaurants, barbers, and service businesses.
Services
Men's Cut$35
Beard Trim$20
Hot Towel Shave$45
Services Menu (Columned)
services-menu-columned
Service list with names, prices, and dotted leaders. Essential for salons, spas, detailers, restaurants.
@yourbrand
Instagram / Social Feed
instagram-feed
Row of recent posts styled as an IG grid. Very common client request for social proof.
Content Sections
+
Is there really no upfront cost?
−
How long does a site take?
Most sites are delivered within 48 hours of our call.
+
Can I edit the site myself?
FAQ Accordion
faq-accordion
Expandable Q&A rows with +/- toggle. Standard FAQ pattern used on most client sites.
How It Works
1
Book a Call
2
We Build
3
You Approve
Process Steps (Horizontal)
process-steps-horizontal
Numbered circles with connecting lines. Used on FJMedia agency site — the standard process section.
✕ MYTH
A good site takes 4-8 weeks and costs $5K+
✓ REALITY
48 hours, hand-coded, from $200
Myth vs. Reality
myth-vs-reality
Split-row myth (left) vs reality (right). Currently live on FJMedia agency site replacing the FAQ.
Portfolio / Work Grid
portfolio-work-grid
Grid of project cards with hover overlay. Used on FJMedia. Optional category filter tabs above.
CTA & Conversion
Ready to Get Started?
Book a free 15-minute call.
Book a Call
CTA Banner
cta-banner
Full-width centered heading + subtitle + button. Goes before footer on every client site.
Let's Build
Something Great.
Something Great.
Get Started
📧 hello@fjmedia.ca
📱 (204) 555-0100
📍 Winnipeg, MB
Contact Split (CTA + Info)
contact-split
Heading + CTA on left, contact details on right. Standard contact section pattern.
Free Download
Website Audit Checklist
10-point checklist to evaluate any business website.
Get It Free
Lead Magnet Block
lead-magnet-block
Download offer with title + description + CTA. Used on FJMedia for audit lead magnet capture.
Choose Your Package
Starter
$300
POPULAR
$600
Premium
$1,000
Pricing Table (3-Tier)
pricing-table-3-tier
Three pricing columns with highlighted middle option. Standard pricing section for any service site.
Footer & Utility
{FJ}Media
Winnipeg Web Design
Services
Portfolio
Contact
Instagram
Email
© 2026 FJMedia · Winnipeg, MB
Footer (3-Column Dark)
footer-3-col-dark
Logo + nav links + social in columns, copyright below. Standard dark footer for all client sites.
{FJ}Media
© 2026 FJMedia
Footer (Centered Minimal)
footer-centered-minimal
Logo + social icons + copyright centered. Simpler option for single-page or minimal client sites.
Name
Email
Message
Send
Contact Form
contact-form
Name + email + message + submit. Web3Forms or GAS backend. Standard for all client sites.
📍
Visit Us
123 Main St, Winnipeg MB
[ Google Maps Embed ]
Location / Map Section
location-map-section
Address card + embedded Google Map. Good for brick-and-mortar: barbers, bakeries, restaurants.
Modal Patterns
Overlay and reveal patterns for full-screen content. Reference by name to scaffold modals quickly.
Reveal Transitions
Clip-Path Circle Reveal
clip-path-circle-reveal
CSS-only modal. Hidden checkbox + label toggle. Circle expands from center via clip-path. No JS required. Used on FJMedia case studies.
Iris Wipe (From Click Origin)
iris-wipe-from-click
Same clip-path circle but originates from where the button is. Needs minimal JS to set --x/--y origin coordinates on click.
Inset Reveal (Expand from Center)
inset-reveal-modal
Rectangular expand using clip-path: inset(). Grows from center outward. Clean, modern alternative to circle reveal.
Diagonal Wipe
diagonal-wipe-modal
Clip-path polygon wipes diagonally across the screen. Dramatic, cinematic feel. Great for portfolio reveals.
Slide Up (Bottom Sheet)
slide-up-modal
Modal slides up from the bottom edge. Natural for mobile bottom sheets, confirmations, and quick actions.
Fade + Scale Pop
fade-scale-modal
Fades in while scaling up with an elastic overshoot. Classic dialog/alert pattern. Clean and quick.
Curtain Split
curtain-split-modal
Content reveals from center outward like curtains opening. Dramatic for portfolio reveals and galleries.
Slide From Right (Drawer)
drawer-modal-right
Panel slides in from the right edge. Standard for side drawers, cart panels, mobile nav overlays.
Forms & Inputs
Styled form elements and input patterns. Reference by name when building contact forms, booking flows, and order pages.
Input Styles
Email
hello@fjmedia.ca
Floating Label Input
floating-label-input
Label sits above input in gold uppercase. Dark bg, subtle border. Current FJMedia form standard.
Your name...
James Diaz
Underline-Only Input
underline-input
No box, just a bottom border that turns gold on focus. Minimal and elegant. Great for premium sites.
Focused state
Gold focus ring active
Glow Focus Ring
glow-focus-input
Input gets gold border + outer glow on focus. Accessible and premium. Works on dark and light themes.
Tell us about your project...
0/500
Optional
Textarea with Counter
textarea-counter
Message box with character count and optional label. Standard for contact forms and order notes.
Interactive Controls
Off
On
Toggle Switch
toggle-switch-gold
iOS-style toggle in gold. Use for preferences, filters, dark mode, or opt-in settings.
Monthly
Yearly
One-Time
Segmented Control
segmented-control
Pill-style button group for toggling between options. Pricing toggles, filter bars, view switchers.
Custom Checkbox / Radio
custom-checkbox-radio
Styled checkboxes and radios in gold. Use for order forms, surveys, preference selectors.
Select service...
▼
Custom Dropdown Select
custom-select-dropdown
Styled dropdown replacing native select. Gold hover, dark bg. Service pickers, package selectors.
Validation & States
hello@fjmedia.ca
✓ Valid email
not-an-email
✗ Please enter a valid email
Inline Validation
inline-validation
Green/red border + helper text below input. Real-time feedback for forms.
✓
2
3
Step 2 of 3
Multi-Step Progress
multi-step-form
Step indicators + progress bar for multi-page forms. Booking flows, order wizards, onboarding.
✓
Message Sent!
We'll get back to you within 24 hours.
Success State
form-success-state
Animated checkmark + confirmation message after form submit. Standard for all contact forms.
4
2
_
_
Enter verification code
OTP / Pin Input
otp-pin-input
Individual digit boxes for verification codes. Booking confirmations, member-only access.
Specialized Inputs
🔍
Search services...
Search Input with Icon
search-input-icon
Input with magnifying glass icon. Filterable lists, blog search, service finder, FAQ search.
••••••••
SHOW
Min 8 characters
Password with Toggle
password-toggle
Password field with show/hide eye toggle. Login forms, member areas, admin panels.
★
★
★
★
★
4 out of 5 stars
Star Rating Input
star-rating-input
Clickable star rating. Review forms, feedback, satisfaction surveys. Hover highlights stars.
↑
Drop files or browse
File Upload / Drop Zone
file-upload-dropzone
Dashed border drag-and-drop area. Photo uploads, document submissions, portfolio submissions.
0
100
65
Range Slider
range-slider-gold
Styled range input with gold track and thumb. Budget selectors, quantity pickers, preference scales.
Date / Time Picker
date-time-picker
Styled calendar grid for booking and appointment forms. Essential for service businesses.
Web des
Web Design
Web Development
Web Hosting
Autocomplete Suggestions
autocomplete-input
Input with dropdown suggestions as you type. Search bars, address fields, service selection.
SEO
×
Design
×
Add...
Multi-Select Tags
multi-select-tags
Removable pill tags inside an input. Service selection forms, filters, category pickers.
Order Form Controls
−
6
+
Biscoff
Quantity Stepper (+/-)
quantity-stepper
+/- buttons adjust a readonly number input in steps of 3 (or 1). Updates live order summary. Standard for bakery/food order forms.
Ceramic Coating
$80 - $150
Engine Bay
$40 - $60
Add-On Checkbox Cards
addon-checkbox-cards
Styled checkbox inputs inside cards. Selected state changes border + background. Each shows price range. Use for optional service add-ons.
Order Summary
Biscoff x6$20.00
Matcha x6$20.00
Total$40.00
Live Order Summary
live-order-summary
Dynamic price calculator showing line items + total. Updates in real time based on qty steppers. Shows/hides based on selection state.
Sedan
SUV
Truck
Selection updates all visible prices in real time
Vehicle Class Toggle + Pricing
vehicle-class-pricing
Button group selects category → applies surcharge → updates all visible prices. Use for any service with tiered pricing by class/size.
Backgrounds & Dividers
Section backgrounds, textures, and dividers that add depth between content blocks.
Section Dividers
Wave Divider
wave-divider
SVG wave between sections. Soft organic transition. Great for bakeries, spas, wellness sites.
Angled Section Break
angled-divider
Diagonal clip-path between sections. Modern and edgy. Detailers, fitness, tech brands.
Multi-Wave Divider
multi-wave-divider
Multiple wave peaks for more organic feel. Restaurants, food, lifestyle brands.
Arrow / Chevron Divider
arrow-divider
Downward arrow pointing to next section. Draws the eye down. Good for CTAs and process sections.
Background Textures
Content here
Gradient Mesh
gradient-mesh-bg
Layered radial gradients for organic mesh effect. Modern hero and section backgrounds. Apple style.
Content here
Dot Grid Pattern
dot-grid-bg
Subtle repeating dot pattern overlay. Adds texture without distraction. Tech, SaaS, dashboards.
Noise / Grain Overlay
noise-grain-overlay
Film grain texture via SVG filter. Adds analog warmth. Photography, creative, premium brands.
Animated Gradient BG
animated-gradient-bg
Slow-shifting gradient overlay. Adds life to static sections. Hero backgrounds, landing pages.
Grid Lines Pattern
grid-lines-bg
Subtle grid overlay via repeating-linear-gradient. Blueprint feel. Tech, engineering, dashboards.
Content here
Gradient Fade to Accent
gradient-fade-accent
Section bg fades from dark to subtle gold at the bottom. Draws the eye to CTAs below.
Diagonal Stripe Pattern
diagonal-stripe-bg
Subtle repeating diagonal lines. Industrial, construction, barber — adds texture without distraction.
Bokeh / Soft Circles
bokeh-circles-bg
Blurred floating circles behind content. Dreamy, premium feel. Photography, events, weddings.
Curved Section Divider
curved-divider
S-curve SVG between sections. Elegant and flowing. Spas, wellness, luxury brands.
Content here
Top Spotlight Glow
spotlight-glow-bg
Radial glow from top center, like a spotlight. Draws attention to headings. Hero and CTA sections.
Radial Burst / Sunburst
sunburst-bg
Lines radiating from center point behind content. Event pages, hero accents, retro-modern vibes.
CSS Halftone Dots
halftone-dots-bg
Background fades using a halftone dot pattern. Print-inspired texture for editorial and creative brands.
Topographic Lines
topographic-lines-bg
Subtle contour-line pattern. Popular for outdoor brands, craft breweries, and artisan businesses.
Image & Gallery
Image display patterns for portfolios, showcases, and before/after reveals.
Gallery Patterns
Before / After Slider
before-after-slider
Draggable slider comparing two images. Detailers, renovators, beauty — anyone with transformations.
Lightbox Gallery
lightbox-gallery
Click thumbnail to open full-screen overlay with prev/next. Portfolios, photo galleries, product shots.
Horizontal Scroll Gallery
horizontal-scroll-gallery
Side-scrolling image strip. Touch-friendly. Product showcases, menu items, portfolio highlights.
Image Carousel with Dots
image-carousel-dots
Auto-rotating or swipeable image slider with dot pagination. Hero images, testimonials, featured work.
Lazy Load Fade-In
lazy-load-fade
Images fade up as they enter viewport. Intersection Observer based. Smooth loading for galleries.
Hover Zoom Preview
hover-zoom-preview
Image zooms inside its container on hover. Product detail pages, food menus, e-commerce.
Advanced Gallery
Masonry Grid
masonry-grid
Mixed-size image grid with no gaps. Pinterest style. Photo portfolios, galleries, creative agencies.
Accordion Image Panels
accordion-image-panels
Hover a panel and it expands while others shrink. Services showcase, team members, portfolio categories.
Stacked Photo Pile
stacked-photo-pile
Overlapping photos with slight rotation. Casual, creative feel. About sections, memories, events.
Image Card with Overlay Text
image-overlay-text
Text layered over image with gradient overlay. Portfolio grids, project showcases, blog cards.
Hover Overlay with Label
hover-overlay-label
Dark overlay slides in on hover with action text. Portfolio grids, image galleries, project cards.
Video & Slideshow
0:32
Video Play/Pause Toggle
video-play-toggle
Click/tap toggles play/pause. Only one video plays at a time (pause all others). Play button overlay hides when playing. Reviews, galleries, hero backgrounds.
Auto-Rotating Slideshow
crossfade-slideshow
Cycles every 5s with 1.6s crossfade. .active shows current, .fading triggers exit. About sections with multiple images, hero backgrounds.
Infinite Marquee Gallery
marquee-gallery
Two rows scrolling opposite directions. Content duplicated for seamless loop. Pause on hover. Photo-heavy sites — bakeries, portfolios.
gallery item
✗
Image Error Fallback
image-error-fallback
onerror handler hides the gallery item if image fails to load. Prevents broken image icons. Use on any gallery pulling from user-uploaded images.
Scroll Effects
Scroll-triggered behaviors and indicators. Reference by name when adding scroll-based polish.
Scroll position indicator
Scroll Progress Bar
scroll-progress-bar
Thin gold bar at top of page that fills as user scrolls. Blog posts, long-form content, case studies.
247
Projects delivered
48h
Avg. delivery
Count-Up on Scroll
count-up-scroll
Numbers count from 0 to target when section enters viewport. Stats sections, social proof.
Section appears on scroll
Reveal on Scroll (GSAP)
gsap-scroll-reveal
Elements animate in when scrolled into view. GSAP ScrollTrigger. Your standard build pattern.
Parallax Section
parallax-section
Background moves slower than foreground on scroll. Depth effect for hero and feature sections.
Nav appears after scrolling past hero
Sticky Nav on Scroll
sticky-nav-scroll
Nav hidden initially, slides down and sticks after scrolling past hero. Clean and non-intrusive.
Infinite Scroll Strip
infinite-scroll-strip
Auto-scrolling horizontal strip of logos, images, or cards. Client logos, services, trust indicators.
‹
Full-Width Slide
›
Full-Screen Image Slider
fullscreen-slider
Edge-to-edge carousel with minimal controls. Most requested gallery type for restaurants and realtors.
Thumbnail Strip Gallery
thumbnail-strip
Large main image with clickable thumbnails below. Standard for product and portfolio detail pages.
All
Web
Brand
Filterable Gallery
filterable-gallery
Category filter buttons above a grid. Portfolios with multiple project types, product catalogs.
Advanced Scroll
Text appears word by word
We
build
websites
that
sell.
Scroll-Triggered Text Reveal
scroll-text-reveal
Words or lines fade in one at a time as you scroll. Hero headlines, mission statements, storytelling pages.
Full-Screen Scroll Snap
scroll-snap-fullscreen
Each section fills the viewport and snaps into place. Landing pages, presentations, portfolios.
Animated Skill Bars
animated-skill-bars
Horizontal bars fill to a percentage on scroll. Skills, stats, capacity indicators, progress tracking.
Scroll Timeline / Steps
scroll-timeline
Vertical timeline with dots and lines that fill as you scroll. Process pages, how-it-works, roadmaps.
Scroll-Scaled Background Text
scroll-scale-text
Large faded text scales or moves as you scroll while content sits on top. Hero effect, section intros.
Horizontal Scroll Section
horizontal-scroll
Content scrolls horizontally while user scrolls vertically. Portfolio showcases, timelines, case studies.
Words highlight as you scroll
We
create
websites
that
turn
visitors
into
clients.
Text Highlight on Scroll
scroll-text-highlight
Words progressively highlight as user scrolls past them. Mission statements, storytelling sections.
Pin and Reveal
pin-and-reveal
Content pins while new elements layer in on top. Scrollytelling, feature reveals, case study narratives.
Micro-interactions
Small animations that make a site feel alive. Reference by name to add polish to buttons, states, and actions.
click to see
Button Click Ripple
button-ripple
Material-style ripple effect on button click. Tactile feedback. Works on any clickable element.
click to replay
Success Checkmark
success-checkmark
Animated SVG checkmark that draws itself. Form success, completed steps, confirmed bookings.
Hover to toggle
Toggle with Bounce
toggle-bounce
Toggle switch with elastic overshoot on the knob. Feels snappy and satisfying. Settings, filters.
Submit
click to see
Confetti Burst
confetti-burst
Small confetti particles explode from a button on success. Celebrations, form completions, milestones.
❤️
click to pulse
Like / Heart Animation
like-heart-animation
Heart scales up on hover, pulses on click. Social features, favorites, wishlists.
Loading...
Loading Dots
loading-dots
Three dots pulsing in sequence. Inline loading state for buttons, chat typing indicator.
Advanced Micro-interactions
Button Arrow Slide-In
button-arrow-slide
Arrow appears and slides in from left on hover. Subtle call-to-action enhancement for links and buttons.
Button Fill on Hover
button-fill-hover
Background color fills from left to right on hover. Ghost buttons that transform into solid CTAs.
★
★
★
★
★
Hover Star Rating
hover-star-rating
Stars scale and tilt on hover. Adds personality to review/rating displays. Testimonials, feedback.
✉
Email
📷
IG
Social Icon Lift
social-icon-lift
Social icons float up with background fill on hover. Footer social links, contact sections.
click to see
Copy-to-Clipboard Feedback
copy-clipboard-feedback
Button text swaps to "Copied!" then back. Inline confirmation without modals. Share links, code snippets.
Cursors & Tooltips
Custom cursors, tooltips, and info popovers. Premium polish for portfolio and creative sites.
Move mouse here
Custom Cursor (Dot + Ring)
custom-cursor-dot
Small dot with trailing ring that follows mouse. Premium portfolio, creative, and agency sites.
Hand-coded
No templates, no builders
Tooltip (Top)
tooltip-top
Gold-bordered tooltip above element with arrow. Definitions, feature explanations, help text.
?
What's included?
Custom design, mobile-ready, SEO basics, and hosting setup.
Info Popover Card
info-popover
Rich popover with title + description on hover/click. Pricing details, feature explanations, help icons.
Cursor Label (Magnetic)
cursor-label-magnetic
Label follows cursor inside an element. "View Project", "Drag", "Play". Premium portfolio pattern.
✉
Email
📷
Instagram
Icon Tooltip Row
icon-tooltip-row
Social icons with tooltip labels on hover. Footer social links, contact bar, team profiles.
J
Magnetic pull on hover
Magnetic Button
magnetic-button
Element subtly pulls toward cursor when nearby. Premium interactive feel. Nav buttons, CTAs, icons.
Advanced Cursors & Tooltips
Inbox
3
Animated Notification Badge
notification-badge
Counter badge that bounces or scales on state change. Inbox counts, cart items, unread messages.
Right-click feel
Edit
Duplicate
Delete
Context Menu / Dropdown
context-menu
Animated dropdown that scales in from trigger point. Action menus, settings, user profile dropdowns.
Cursor Spotlight
cursor-spotlight
Radial glow follows cursor within a container. Premium hero sections, dark-theme feature areas.
🏠
Home Page
Main landing page with hero, services, and contact form.
Hover for preview
Rich Preview Tooltip
rich-preview-tooltip
Multi-line tooltip with title + description on hover. Sitemap previews, feature details, navigation hints.
Available now
Busy
Offline
Status Dot Indicator
status-dot-indicator
Colored dots with optional pulse for live status. Online/offline, availability, system health indicators.
Loading & Empty States
Polish for async operations and empty content areas. Professional sites handle every state.
Loading Patterns
Skeleton Screen
skeleton-screen
Content placeholder shapes with shimmer animation. Cards, feeds, dashboards while data loads.
Loading...
Full-Page Loader
full-page-loader
Centered spinner with brand element. Page transitions, initial data fetches, route changes.
Loading content...
Progress Bar Loader
progress-bar-loader
Thin bar across top of page showing load progress. Page navigations, file uploads, form processing.
🗒
No projects yet
Create your first one to get started.
Empty State Placeholder
empty-state
Centered icon + message for "no content" scenarios. Dashboards, search results, empty galleries.
Blur-Up Image Load
blur-up-load
Blurred placeholder that sharpens as image loads. Portfolio images, hero backgrounds, gallery grids.
Sending...
Button Loading Spinner
btn-loading-spinner
Button text replaced with inline spinner on click. Form submissions, save actions, payment processing.
Conversion Patterns
Proven patterns from FJMedia client sites that drive action. Reference by name when building any conversion-focused page.
Source: These patterns are documented in
conversion_playbook.md and ui_patterns.md. Each card maps to a specific playbook rule.
CTA Patterns
Your Headline Here
One sentence that answers: who is this for?
Place an Order
View Gallery
Dual CTA (Primary + Secondary)
dual-cta
Every hero gets two buttons: filled primary (action + outcome) and outline secondary (lower commitment). Never use "Submit" or "Learn More".
Book Your Detail
No contracts · Free preview · Pay when you're happy
Trust Signal Bar
trust-signal-bar
One-line micro-copy strip below hero CTA. Eliminates top objections instantly. Dot-separated, muted text.
Our Promise
Free to see it, pay if you're satisfied.
No contracts, no deposits — walk away if not happy.
No contracts, no deposits — walk away if not happy.
Risk Reversal Badge
risk-reversal
The single most powerful conversion lever. State what the customer risks (nothing) and what they gain (everything). Place above final CTA.
page content above
Order Now
Sticky Mobile CTA Bar
sticky-mobile-cta
Fixed bottom bar on mobile (<768px). Hidden by default, slides up via IntersectionObserver after hero exits viewport. Backdrop blur + shadow.
Urgency & Gating
This preview expires in
71
:
59
:
44
Persisted via localStorage across refreshes
72-Hour Countdown Expiry
countdown-72hr
Sticky top bar with localStorage-persisted countdown. Designed for pitch pages sent to prospects. Creates hard deadline urgency.
Enter Password
••••••••
Unlock
Password Gate Overlay
password-gate
Full-screen overlay requiring password before content is accessible. Smooth fade-out on correct entry. Private client previews.
🍦
Flavour of the Month
Ube White Chocolate — April only
Flavours rotate seasonally — soft, always-true urgency
FOTM / Seasonal Rotation
fotm-seasonal
Best repeatable urgency pattern — always true because the flavor/offer does change monthly. Never fake scarcity.
How to Order
1
Browse
2
Fill Form
3
Confirm
Hook → Credibility → Desire → Trust → Process → Action → Fallback
Section Order Framework
section-order-framework
Default conversion flow: Nav → Hero → About → Featured → Products → Gallery → Reviews → Process → Form → Contact → Footer. Social proof BEFORE conversion path.
Social Proof & Carousels
Scroll-Snap Review Carousel
review-carousel-snap
CSS scroll-snap-type:x mandatory with hidden scrollbar. Cards flex:0 0 220px (desktop) / 155px (mobile). Left/right arrows hidden on mobile — swipe is intuitive.
Video Testimonial Cards
video-testimonial-cards
9:16 aspect ratio cards with play button overlay. Only one video plays at a time. Mix static screenshot reviews with video in same carousel.
★★★★★
"Amazing quality, ordered twice already!"
— Ashley K.
Review Placement Rule
review-before-form
Social proof goes BEFORE the conversion form, never after. Flow: Gallery/Menu → Reviews → How It Works → Order Form. See product → see others love it → commit.
Product
Photo + Price
Service
Headshot + Badge
Portfolio
Best Work
Hero visual by business type
Hero Visual by Niche
hero-visual-niche
Product sites: product photo. Service sites: headshot + credential badge. Portfolio sites: best work slideshow. Event sites: name + date + venue.
Contact & Objection Handling
✉
DM to Order
@handle
✉
Email
hi@brand.ca
⚲
Pickup
Area only
Contact Method Cards
contact-method-cards
Lucide icon + label + value. Horizontal on desktop, stacked on mobile. 2-3 methods max. Use heading like "Prefer to Order Your Way?" not "Contact Us".
+
How long does the detail take?
−
What if I'm not satisfied?
Full refund, no questions asked.
+
Do you come to me?
FAQ Before Final CTA
faq-before-cta
Place FAQ between social proof and final CTA — never at the bottom. Questions in customer's voice. Last FAQ addresses biggest objection (pricing, trust, timeline).
Starter
$200
Select
BEST VALUE
$400
Select
Premium
$700
Select
Middle tier = "Best Value" badge + filled CTA. Others get outline.
3-Tier Pricing (Conversion Rules)
pricing-3-tier-conversion
Always 3 tiers. Featured middle card gets filled CTA, others get outline. Show the math when a calculator applies. "What you see is what you pay."
✓
Nav CTA (right side)
✓
Hero (dual CTA)
✓
After social proof
✓
Bottom of page
✓
Sticky mobile bar (<768px)
After pricing section
CTA Placement Checklist
cta-placement-map
Every page needs CTAs at 6 locations minimum: nav, hero (dual), after social proof, bottom of page, sticky mobile bar, after pricing. Copy formula: Action + Outcome.