Aisol Offer Stage
Aisol Offer Stage — the closing offer section for a landing page, where each benefit shows itself on a product stage.
A Framer code component. It is the closing offer section for a landing page: a product stage on one side, and on the other your title, benefits, price and buy button. Point at a benefit, tab to it or tap it, and the stage swaps to that benefit's own picture with a short crossfade, so every line of your offer gets shown, not just told. One file, no plugins, no external libraries.
What you get
• Content: eyebrow, title, text, section name
• Benefits (1 to 6): title, one line, optional image
• Price: currency, amount, optional compare-at price, period, note
• Actions: primary button text and link, secondary link text and link, trust line
• Stage: starting benefit, auto-cycle on or off, seconds per benefit, stage shape, image fit, stage side
• Look: background, panel, text, muted, lines, accent and on-accent colours; radius, max width, padding
• Type: font and text size; Labels: screen-reader and pause button wording
How it behaves
• Works on drop: four benefits with their own drawn scenes, a price and a call to action, no images needed.
• The swap is a CSS crossfade on one state; auto-cycle runs on a CSS timer, pauses on hover, focus, off-screen and hidden tabs, stops for good once a visitor picks a benefit, and never runs with reduced motion.
• Benefits are real buttons with a pressed state; the stage image takes its alt text from the benefit, and screen readers hear one short note when the visitor changes it.
• Keyboard: Tab to the benefits, arrow keys move between them, Home and End jump to the ends.
• Nothing runs while idle; the static canvas shows the same first frame as the live page.
Limits
One offer per section (not a pricing table); up to 6 benefits; no countdown or stock counter by design; below about 800px wide the stage sits above the offer; use Height Fit.
Requirements
Any Framer project. No plugins, no external libraries. Free updates through this page.