Launch Drop Capsule

Quick Start#

1. Add Launch Drop Capsule to your page, set its width to fit the section, and let its height fit the content.
2. Set Live At to your actual launch date and time. Replace the sample dates. Enable Preorder and Closing only if you need those phases, then set their dates in order.
3. Edit Teaser Copy, Preorder Copy, Live Copy, and Closed Copy for the phases you use.
4. Add the appropriate Link and Text in each phase's CTA group. An enabled CTA without a link is inactive.
5. Choose a Preset. If you use Availability, replace the sample numbers with your own manual values and retain a clear disclosure.
6. Use Preview → Simulate to inspect states in Canvas. Then choose Real Time, keep Sim Outside off, and open Framer Preview to verify the actual schedule and links.

Schedule and Phases#

The capsule derives its phase from the configured timestamps and the visitor's clock. Teaser counts toward Preorder when enabled and valid, or toward Live otherwise. Preorder counts toward Live. Live counts toward Close when configured, or shows the “AVAILABLE NOW” label. Closed replaces the clock with closing copy.

These are sample dates, not your campaign schedule. They are fixed demonstration values in late 2026, so once those dates pass an unconfigured capsule reads as Closed. Set each one explicitly. Campaign must precede the first scheduled phase. A missing or invalid Live At leaves the schedule unconfigured. An invalid Preorder At disables that phase; an invalid Close At leaves Live open indefinitely. The component does not automatically repair date ordering.

Time Zone#

Time Zone defaults to Viewer. Choose Fixed to format the displayed date using IANA Zone, initially America/Mexico_City. Show Date is off by default and enables the next-boundary date label when a boundary is available.

Time Zone changes date formatting only. It does not shift the scheduled instant or create a different countdown for each visitor's local time. Confirm the actual time in the date picker before testing the schedule.

Simulation#

These are the capsule's Property Controls. The interactive demo also has a separate toolbar, described below.

Simulation lets you inspect copy and layout without moving your dates. By default it is confined to Canvas; Preview uses the real schedule. Enabling Sim Outside also permits simulation on the site. Keep it off for a real campaign and verify with Preview set to Real Time.

Using the Interactive Demo#

The demo opens in a frozen Live state, at Wide width, with the Chrome appearance. Its toolbar provides:

• State — frozen for inspection: Teaser, Preorder, Live, and Closed hold a representative state so you can inspect the layout and copy.
• Transition — real time: Teaser → Preorder, Preorder → Live, Live → Closed, Open already closed, and Full cycle start demonstration schedules. Selecting a scenario again restarts it.
• Width — drives the responsive layout: Wide, 768, 375, and 320 change the demo container width.
• Appearance: Chrome, Lime, Champagne, Dense spacing, and Bar motion change the demonstration's presentation.

The toolbar supplies its own sample schedule and simulation settings. Its frozen Live view is independent of the capsule's default December dates. To configure a real campaign, add Launch Drop Capsule itself and use Live At, the phase copy and CTA groups, and the other Property Controls in this guide. The demo toolbar is not included in a normally inserted capsule.

Copy and Calls to Action#

Each phase has its own copy group. Teaser and Preorder expose Status, Label, and Description. Live adds No Close, the label shown for an open-ended live phase. Closed exposes Status, Heading, Message, and Description.

The matching Teaser CTA, Preorder CTA, Live CTA, and Closed CTA groups contain Enabled, Text, Link, and Aria. Defaults are GET NOTIFIED, PREORDER NOW, SHOP THE DROP, and VIEW COLLECTION. Supply destinations for the phases you use.

New Tab is off by default; Arrow is on. CTA Morph controls the transition as the action changes phase and defaults to a spring. A CTA is a link to a destination you configure; the capsule does not collect signups, process payments, or create a store.

Countdown and Timeline#

Scale → Real needs both a valid Campaign start and a closing date; otherwise the timeline uses equal spacing. The timeline communicates phase progress and is not a set of navigation buttons.

Manual Availability#

Only use quantities you can maintain accurately. Turning on Bar Motion does not simulate sales or reduce the remaining count.

Appearance and Motion#

Choose Chrome / Red, Lime / Black, Champagne / Black, or Custom under Preset. Custom exposes Background, Foreground, Accent, Muted, and Border colors.

Radius defaults to 14 px, Padding to 24 px, Outer Border to on, Density to Comfortable, and Chrome Text to on. Density also offers Compact. Typeface changes the font family; untouched, the component loads Poppins and has fallback fonts.

Celebration is on by default, with Trigger → Live, Style → Sparks, and Intensity → Low. You can choose Preorder or Closed as the trigger, Confetti as the style, and Medium intensity.

Celebration runs when an open page observes the actual phase change. It does not replay simply because someone arrives during Live or you select a simulated state. Reduced-motion preferences disable celebration and animated transitions. Static rendering does not animate the clock.

Responsive Behavior#

The component measures its container. It uses a wide arrangement from 900 px, a medium layout from 600 to 899 px, and a compact layout below 600 px. The countdown scales its digits and spacing to the available room, and narrow layouts reduce padding and rearrange the sections.

Use content-based height so copy, timeline, and availability can fit. Long custom CTA text, many countdown digits, and narrow containers still need a Preview check. Density → Compact is useful for tighter sections.

Recommended Usage#

Use a capsule for a product release, limited-time collection, registration window, or preorder campaign. Connect the active CTA to the appropriate signup, preorder, shop, or archive page. Keep the date sequence and the destination pages consistent.

For an evergreen launch, disable Closing. For a direct launch without presales, disable Preorder. Hide Availability when you do not have a useful manual figure to display.

Best Practices#

• Replace every sample date and check the intended time zone.
• Test each phase's copy and CTA in simulation, then verify Real Time behavior.
• Keep Sim Outside off for real campaigns.
• Retain an honest availability disclosure and update quantities yourself.
• Keep CTA labels short and check custom color contrast.

Accessibility#

The capsule provides a text summary of the current state and countdown. Phase changes use a polite announcement, rather than announcing every ticking second. The availability meter exposes progress information, and linked CTAs support a custom Aria label and visible keyboard focus.

Reduced-motion preferences suppress celebration and animated transitions. Decorative clock treatment is accompanied by readable text. Check the contrast of your own custom palette and write CTA labels that identify their destinations.

Troubleshooting#

Preview shows Teaser instead of the Live state I selected#

On the standalone capsule, State applies to simulation. Sim Outside is off by default, so Preview uses the actual dates. Use Canvas to inspect simulated states or deliberately enable Sim Outside for testing, then turn it off again. In the interactive demo, use the State toolbar instead; it supplies its own simulation settings.

I only see Start On, Start Width, and demo settings#

You have selected the demonstration container. Add Launch Drop Capsule itself to access its schedule, phase copy, CTA, availability, and appearance controls.

The countdown is missing or the schedule is unconfigured#

Set a valid Live At. An open-ended Live phase shows the No Close label instead of a countdown; Closed shows its closing message.

My preorder or closing phase is skipped#

Ensure Preorder At is before Live At and Close At is after it. Invalid optional boundaries are omitted. Also check the Preorder and Closing toggles.

Changing Time Zone does not change the countdown#

That control only formats the displayed date. Edit the scheduled dates to change the launch instant.

The CTA looks disabled#

Fill in Link in the current phase's CTA group. Enabled without a destination produces an inactive action. Verify the link in Preview.

The availability number does not change after a sale#

It is a manual indicator. Update Remaining, Total, or Claimed yourself, or hide Availability if you cannot keep it current.

Confetti does not play when I open the page#

Celebration requires the open page to witness the configured phase transition. It does not fire on arrival, static rendering, simulated state changes, or with reduced motion enabled.

FAQ#

Can I launch without a preorder phase?#

Yes. Turn off Preorder and the Teaser countdown targets Live At directly.

Can the Live phase stay open indefinitely?#

Yes. Turn off Closing. Live then uses the No Close label instead of a closing countdown.

Does it connect to my store inventory?#

No. Availability values are entered manually. Links can lead to your store, but the capsule does not synchronize stock.

Can every phase have a different button?#

Yes. Each phase has its own CTA group with text, destination, enabled state, and optional Aria label.

Does each visitor get a different local launch time?#

No. The schedule uses absolute timestamps. Viewer and Fixed control how the date label is formatted.

Can I preview every state without changing the schedule?#

Yes. Use Preview → Simulate and choose State and Progress in Canvas.

Can I turn off celebration or the timeline?#

Yes. Celebration and Timeline have independent toggles. Reduced motion also suppresses celebration.

Limitations#

The component presents a scheduled campaign; it is not checkout, signup storage, inventory synchronization, or server-enforced access control. It relies on the visitor's device clock. Availability is manual. Simulation can appear on the site if Sim Outside is enabled. The phase sequence is fixed to Teaser, optional Preorder, Live, and optional Closed.

Changelog#

v1.0#

Initial documented version of Launch Drop Capsule.

• Scheduled Teaser, optional Preorder, Live, and optional Closed phases.
• Countdown, phase-specific copy and CTA links, and optional timeline.
• Manual availability indicator, Canvas simulation, responsive layouts, and optional phase-transition celebration.