9 components. Every assembly uses them.
When a visitor arrives, Spectare selects atoms from your library and maps each one to a component. The left panel shows the atom you write. The right panel shows what the visitor sees.
ImageCtaHero
A full-width image (16:9 ratio) with a dark gradient overlay. Claude generates the headline, subheading, and CTA label. The image URL and CTA link are resolved server-side.
audiences: any · stages: consideration, decision
Input: atom content
headline
See your website the way every visitor does
subheading
Spectare adapts your content in real time based on who is visiting.
ctaLabel
Start free trial
Output: rendered component
In production, src and ctaHref are resolved server-side. Claude only writes the headline, subheading, and ctaLabel.
CtaStrip
A prominent call to action with a short headline and one or two buttons. Always placed last.
audiences: any · stages: consideration, decision
Input: atom content
headline
Start personalising your website
body
Free 14-day trial. One script tag or WordPress plugin. No card required.
cta primary
Start free → /signup?plan=free
cta secondary
See the live demo → /demo/landing
Output: rendered component
Start personalising your website today
HeroStatement
A large bold claim or value proposition with a supporting sentence. Always placed first.
audiences: any · stages: awareness
Input: atom content
headline
Every visitor gets a different page
body
Spectare reads where visitors came from, classifies their intent in under 50 milliseconds, and assembles a personalised page from your atom library. No rules to write, no segments to define.
Output: rendered component
Every visitor gets a different page
Spectare reads referrer and UTM signals, classifies intent in under 50ms, and assembles a personalised experience from your atom library. No rules. No segments. No A/B tests.
AtomCard
Renders atom content as title and body prose. The default component when no specialist type fits.
audiences: any · stages: any
Input: atom content
headline
What is an atom?
body
An atom is one focused piece of content: a feature explanation, a pricing block, a FAQ, a case study. You write atoms in the Spectare admin. Spectare assembles the right combination for each visitor and renders them as structured UI components.
Output: rendered component
What is an atom?
An atom is one focused piece of content: a feature explanation, a pricing block, a FAQ, a case study. You write atoms in the Spectare admin. Spectare assembles the right combination for each visitor and renders them as structured UI components.
StatGrid
A horizontal row of 2 to 4 key numbers with short labels. Anchors credibility with measurable claims.
audiences: any · stages: consideration, decision
Input: atom content
headline
Performance that does not slow you down
body
Spectare classifies visitor intent in under 50ms. Cached assemblies for returning patterns serve in under 50ms with no AI calls. Fresh assemblies for new patterns complete in around 400ms.
keyStats
50ms qualify latency, 400ms fresh assembly, 50ms cached, 500 free/month
Output: rendered component
qualify latency
50ms
fresh assembly
400ms
cached
50ms
free per month
500
Typical latency figures from the Spectare assembly pipeline
CodeBlock
A syntax-highlighted code snippet with optional caption. Targets developer audiences at consideration or decision stage.
audiences: developer · stages: consideration, decision
Input: atom content
headline
Add Spectare to any site
body
One script tag is all you need. Add it to your page, set data-org to your organisation slug, and Spectare starts personalising immediately. No build step, no SDK, no configuration.
intent keywords
integration, setup, script tag, installation
Output: rendered component
ComparisonTable
Side-by-side feature comparison against a named competitor or approach. Used when a visitor is evaluating alternatives.
audiences: manager, executive, developer · stages: consideration, decision
Input: atom content
headline
Spectare vs A/B testing
body
A/B testing splits traffic between fixed variants and waits weeks for statistical significance. Spectare assembles a unique experience for each visitor from the moment they arrive.
competitor
A/B testing
Output: rendered component
FeatureList
A compact bulleted list of 3 to 6 features or benefits. Good for manager audiences at awareness or consideration stage.
audiences: manager, executive · stages: awareness, consideration
Input: atom content
headline
What you get with Spectare
body
Spectare handles the full personalisation workflow: intent classification, content selection, component assembly, and conversion attribution.
Output: rendered component
- ✓
Intent classification in under 50ms
Reads referrer, UTM parameters, and page context. No cookies, no personal data stored.
- ✓
Atom library with vector search
Write content once. Spectare finds the right combination for each visitor automatically.
- ✓
Structured component assembly
9 component types: hero, stats, features, code, comparison, testimonial, image, and CTA.
- ✓
Conversion attribution by atom
See which atoms convert which audiences at which stage of the buying journey.
- ✓
One script tag or WordPress plugin
No developer needed after initial setup. Free 14-day trial.
TestimonialCard
A customer quote with name, role, and optional company. Adds social proof for manager and executive audiences.
audiences: manager, executive · stages: consideration
Input: atom content
headline
Sarah Chen testimonial
body
We stopped spending weeks setting up A/B tests. Now we write atoms and Spectare figures out the rest. Our conversion rate on paid traffic is up 34% in six weeks.
attribution
Sarah Chen, VP Marketing, Acme SaaS
Output: rendered component
"We stopped spending weeks setting up A/B tests. Now we write atoms and Spectare figures out the rest. Our conversion rate on paid traffic is up 34% in six weeks."
Sarah Chen
VP Marketing, Acme SaaS
Size: half. Pairs with another half-width component in a live assembly (see pairing demo below).
Half-width pairing
When two consecutive half-width components appear in an assembly, they are placed side by side automatically. No layout configuration needed.
Assembly JSON
[
{
"component": "TestimonialCard",
"size": "half"
},
{
"component": "AtomCard",
"size": "half"
}
]Rendered side by side
"Spectare replaced three separate A/B testing tools. We ship personalised experiences for every campaign now without touching code."
Marcus Webb
Head of Growth, Relay
Privacy first
No cookies. No personal data. Spectare reads only the HTTP referrer, UTM parameters in the URL, and the text of the current page. Nothing is stored on the visitor's device.