Kazam Website Components

showcASe

Premium components built for the Kazam website. Every piece designed to create a whimsical, memorable experience.

[01 /13]

glow button

Primary CTA with animated pulsing glow shadow. Draws attention to the most important action on the page.

[02 /13]

animated highliGht

Oscillating color shimmer on key words in headlines. Subtle pulse that draws the eye without being distracting.

your ad platforms are optimising on incompletE data

find out what's broken in 60 seconds

tracking becomEs visiblE

[03 /13]

section counter and divider

Mono section labels and gradient dividers for page structure.

[01 /06][03 /12][10 /10]
[04 /13]

scroll rEveal

Intersection observer wrapper. Elements reveal with configurable direction and staggered delays.

0ms delay

Card 1 reveals on scroll

100ms delay

Card 2 reveals on scroll

200ms delay

Card 3 reveals on scroll

300ms delay

Card 4 reveals on scroll

[05 /13]

grid background and noise texture

Layered atmospheric backgrounds. Grid pattern with radial mask + SVG noise for depth. Currently visible behind this section.

[06 /13]

terminAl mockup

MacOS-style window chrome. Dark and light variants. Used for code displays, dashboard previews, and report mockups.

tracking-health-report.json

"score": 34,

"grade": "Critical",

"pixelStatus": "PARTIAL",

"capiStatus": "MISSING",

"offlineConversions": false,

"matchQuality": 0.23

crystal-ball-dashboard.log

[14:32:01] CAPI delivery: OK (23ms)

[14:32:05] Match quality: 94.2%

[14:32:08] Event: purchase $247.00

[14:32:12] Sync: CRM → Google Ads ✓

[14:32:15] Offline import: 12 conversions ✓

[07 /13]

stat countEr

Animated counters that tick up on scroll. Supports prefix, suffix, and sublabels.

0%

Reduction in CPL

Lead gen client

0x

ROAS achieved

Ecommerce brand

0%

More conversions

Multi-platform advertiser

[08 /13]

numbered card

Large watermark number with icon, title, and description. Used for deliverables, service items.

Tracking Audit

Full infrastructure analysis across 8 dimensions with severity scoring.

Pixel & CAPI Setup

Browser-side pixels and server-side Conversions API implementation.

CRM Integration

Connect offline conversions from your CRM back to ad platforms.

Testing & QA

Every conversion path verified before handover.

[09 /13]

procesS step card

Sequential steps with connecting lines. Used for the Audit → Setup → Crystal Ball flow.

01

The Audit

See what's broken. Free tracking analysis across 8 dimensions.

Learn more
02

The Setup

Fix everything. Properly. Once. Complete infrastructure build.

Learn more
03

The Crystal Ball

Keep it accurate. Real-time monitoring of every signal path.

Learn more
[10 /13]

testimoniAl block

Quote blocks with attribution and optional stats. Three variants: card, bordered, dark.

We had no idea how much conversion data we were losing until Kazam ran the audit. The difference in campaign performance after the fix was immediate.
Sarah ChenHead of Growth, TechScale
28%CPL Reduction
3.2xROAS
+47%Conversions
Kazam is the tracking partner every agency needs. Our clients get better results and we spend zero time debugging pixels.
James WrightManaging Director, Velocity Digital
[11 /13]

platform badGe grid

Categorized platform pills for tech stack display.

Ad Platforms

Google AdsMetaTikTokLinkedInMicrosoft Ads

CMS / Website

WordPressWooCommerceShopifyCustom-built

CRM / Offline

HubSpotSalesforceGoHighLevelPipedrive

Analytics

Google Analytics 4Google Tag Manager
[12 /13]

dark sEction

Atmospheric dark sections with layered grid background, noise texture, and radial gradient overlays. Used for stats, CTAs, and results sections.

[13 /13]

composed exAmple

All components working together — how a real Kazam page section would look.

[04 /06]

what happEns when the data gets fixEd

Real tracking engagements with quantified outcomes. Every number from a real project.

0%

CPL reduction

0x

ROAS achieved

0%

More conversions

[14 /26]

severity badge

Color-coded severity indicators for tracking health reports.

criticalhighmediumlowPixel MissingCAPI DegradedUTM Intact
[15 /26]

health score display

Large animated score that counts up on scroll. Color and glow shift based on severity.

0/100
Critical

Critical Setup

0/100
Needs Work

Needs Work

0/100
Healthy

Healthy

[16 /26]

audit scorE dial

Circular gauge with animated needle and color-graded arc. The hero component for The Audit page.

0/100Before Kazam
Critical
0/100After Kazam
Good
[17 /26]

comparison tablE

Before/after comparison with strikethrough on old values and orange highlight on new.

Conversion tracking
Without KazamBrowser pixels only
With KazamPixel + Server-side CAPI
Match quality
Without Kazam23%
With Kazam94.2%
Offline conversions
Without KazamNot tracked
With KazamCRM → platform pipeline
Data freshness
Without Kazam24-48hr lag
With KazamReal-time (<5min)
Attribution
Without KazamLast-click only
With KazamCross-platform verified
[18 /26]

pricing card

Tier cards with feature checklists. Featured tier gets animated gradient border and glow CTA.

Essentials

1-2 ad platforms, straightforward website, pixel + CAPI + events.

  • Tracking audit
  • Pixel & CAPI setup
  • Event configuration
  • Testing & QA
  • Crystal Ball Dashboard
  • 14-day review
Most Popular

Professional

Multiple platforms, CRM + offline conversions, pipeline tracking.

  • Everything in Essentials
  • CRM integration
  • Offline conversion setup
  • Pipeline stage tracking
  • LTV data passback
  • Priority support

Enterprise

Multiple domains/CRMs, custom integrations, advanced offline flows.

  • Everything in Professional
  • Multi-domain setup
  • Custom CRM integrations
  • Advanced offline flows
  • Dedicated support
  • Custom reporting
[19 /26]

animated gradiEnt border

Rotating conic gradient border. Used to highlight featured/recommended elements.

Featured content

The gradient rotates continuously around the border.

3px border

Configurable border width.

[20 /26]

process timelinE

Vertical timeline for multi-phase project delivery. Used on The Setup page.

DiscoveryWeek 1

Understand your stack, goals, and current tracking state.

AuditWeek 1-2

Full 8-dimension tracking analysis with severity scoring.

ImplementationWeek 2-6

Build complete tracking infrastructure: pixels, CAPI, CRM, offline.

Testing & QAWeek 6-7

Every conversion path verified. No signal left untested.

HandoverWeek 7-8

Crystal Ball Dashboard access, documentation, 14-day review period.

[21 /26]

typewritEr code block

Code types itself out character by character on scroll. Blinking cursor. Used for terminal mockups.

tracking-config.json
[22 /26]

magnetic card

3D perspective tilt toward cursor with light reflection. Hover over these cards.

Signal Tracking

Every conversion event captured and verified.

Data Protection

Privacy-compliant server-side tracking.

Performance

Campaigns optimise on complete data.

[23 /26]

bEfore after slider

Drag the handle to compare before and after states. Touch and mouse supported.

Tracking Health: 34/100

Pixel: PARTIAL

CAPI: MISSING

Offline: NONE

Match Quality: 23%

Tracking Health: 94/100

Pixel: ACTIVE

CAPI: SERVER-SIDE

Offline: CRM PIPELINE

Match Quality: 94.2%

BeforeAfter
[24 /26]

live trAcking ticker

purchase·$247.00·Google Ads·✓lead·qualified·Meta·✓add_to_cart·$89.00·TikTok·◆purchase·$1,240.00·Google Ads·✓lead·MQL·LinkedIn·✗purchase·$56.00·Meta·✓signup·trial·Google Ads·✓purchase·$432.00·Meta·✓purchase·$247.00·Google Ads·✓lead·qualified·Meta·✓add_to_cart·$89.00·TikTok·◆purchase·$1,240.00·Google Ads·✓lead·MQL·LinkedIn·✗purchase·$56.00·Meta·✓signup·trial·Google Ads·✓purchase·$432.00·Meta·✓
[25 /38]

floating terminal cards

Decorative code-window snippets floating around hero sections. Hidden on mobile.

[25 /40]

pixEl animations

Animated shapes built entirely from text symbols. Each frame is a grid of characters forming recognizable silhouettes — flame, globe, galaxy, wave, DNA helix. Like ASCII art that moves.

flame

globe

galaxy

wave / pulse

dna helix

flame — light bg

[25 /39]

floating symbols

Ambient geometric symbols drifting on a light background. Crosses, dots, brackets, and dashes in light gray with occasional orange accents. Firecrawl-inspired atmospheric effect for hero sections.

your tracking becomEs visiblE
[26 /38]

dark section wrApper

Pre-composed dark section with auto-included noise texture, grid background, and radial gradient overlays. Just wrap your content.

[27 /38]

use case card

Solution vertical cards with hover accent bar. Used for Lead Gen / Ecommerce / Agencies sections.

Lead Generation

Your CRM knows which leads closed. Your ad platforms don't.

Kazam connects offline conversions to your campaigns — so platforms optimise for revenue, not form fills.

Lead Gen Solutions

Ecommerce

You're losing 30–40% of your conversion data.

Kazam builds server-side tracking that survives ad blockers, iOS restrictions, and cookie deprecation.

Ecommerce Solutions

Agencies

Bad tracking is your silent liability.

Kazam is your infrastructure partner — your team stays on strategy while we handle the data layer.

Agency Solutions
[28 /38]

threat card

Data threat visualization with stats and red-tinted hover. Used on ecommerce solutions page.

~30%

Ad Blockers

Browser extensions silently strip tracking events before they fire.

75%+

iOS ATT Opt-Out

Most users opt out of tracking. Your pixel never sees the conversion.

100%

Cookie Deprecation

Third-party cookies are gone. The old pixel model is dead.

[29 /38]

partnership card

Two partnership models with distinct accent colors. Used on agencies page.

White-Label Partner

Kazam works behind the scenes under your agency's branding. Your clients never know we exist.

  • Full Setup scope per client
  • Crystal Ball access
  • Your branding throughout
  • Priority onboarding
Start a Conversation

Named Specialist Partner

Kazam is introduced as your dedicated tracking partner. We work directly with your clients.

  • Direct client relationships
  • Joint strategy sessions
  • Co-branded reporting
  • Dedicated account manager
Start a Conversation
[30 /38]

faq section

Pre-composed FAQ with accordion. Pass questions as data.

common questions

[31 /38]

contAct form

Full contact form with select dropdown, validation, and loading/success states.

[32 /38]

data rain bAckground

Matrix-style falling characters — tracking terms and binary in near-black with orange highlights. Atmospheric backdrop for dark sections.

[33 /38]

connection constellation

Interactive network graph. Hover a node to illuminate its connections.

BrowserPixelServerGoogleMetaCRMTikTok
[34 /38]

scroll dashboard assEmbly

Dashboard mockup that progressively assembles as you scroll. 4 stages: frame → metrics → chart → status lights.

Crystal Ball
Events
14,827
Match Rate
94.2%
Revenue
$128K
ROAS
4.7x
[35 /38]

haptic progress steps

Progress rings that fill as you scroll past. Connecting lines draw between steps.

1
The Audit
See what's broken.
2
The Setup
Fix everything.
3
Crystal Ball
Keep it accurate.
[36 /38]

page hero

Fully composed hero section for Kazam pages. Auto-includes grid, noise, floating terminals, highlight word.

your ad plAtforms are optimising on incomplete data

Most advertisers are missing 30–40% of their conversion signals. The platforms don't flag it — they just spend worse.

Kazam finds the gaps, fixes the infrastructure, and watches it 24/7.

[26 /26]

full composition

Every component layer working together — a real Kazam page section.

[01 /03]

thE Audit

See what's broken. A free tracking analysis across 8 dimensions of your infrastructure.

0/100
Critical
critical Pixel & Tag Presence
high Server-Side / CAPI
medium Cross-Platform Consistency
low UTM Integrity