Launch Drop Capsule
Presenta un lanzamiento programado con fases Teaser, Preorder, Live y Closed, cuenta regresiva, acciones por fase y un indicador opcional de disponibilidad manual.
Primeros pasos
- Agrega Launch Drop Capsule a tu página, ajusta su ancho a la sección y deja que su altura se adapte al contenido.
- Configura Live At con la fecha y hora reales de lanzamiento. Reemplaza las fechas de muestra. Activa Preorder y Closing solo si necesitas esas fases y ordena sus fechas.
- Edita Teaser Copy, Preorder Copy, Live Copy y Closed Copy para las fases que uses.
- Agrega Link y Text en el grupo CTA de cada fase. Una acción habilitada sin enlace queda inactiva.
- Elige un Preset. Si usas Availability, reemplaza las cantidades de muestra con tus valores manuales y conserva una aclaración visible.
- Usa Preview → Simulate para inspeccionar los estados en Canvas. Después elige Real Time, deja Sim Outside desactivado y abre Framer Preview para verificar el calendario y los enlaces reales.
Calendario y fases
La cápsula determina la fase según las fechas configuradas y el reloj del visitante. Teaser cuenta hacia Preorder cuando está habilitado y su fecha es válida; de lo contrario, hacia Live. Preorder cuenta hacia Live. Live cuenta hacia Close si está configurado o muestra “AVAILABLE NOW”. Closed sustituye el reloj por los textos de cierre.
| Propiedad | Predeterminado en el panel de Framer | Descripción |
|---|---|---|
| Campaign | 20 de noviembre de 2026, 17:00 UTC | Inicio opcional para el progreso de Teaser y las líneas de tiempo proporcionales. |
| Preorder | On | Incluye la fase de preventa cuando su fecha es válida. |
| Preorder At | 1 de diciembre de 2026, 17:00 UTC | Debe ser anterior a Live At. |
| Live At | 5 de diciembre de 2026, 17:00 UTC | Instante obligatorio del lanzamiento. |
| Closing | On | Incluye un cierre cuando su fecha es válida. |
| Close At | 8 de diciembre de 2026, 17:00 UTC | Debe ser posterior a Live At. |
Son fechas de muestra, no el calendario de tu campaña. Son valores fijos de demostración de finales de 2026, así que una vez que esas fechas pasan una cápsula sin configurar se muestra como Closed. Configura cada una explícitamente. Campaign debe preceder a la primera fase programada. Si Live At falta o no es válido, el calendario queda sin configurar. Un Preorder At inválido desactiva esa fase; un Close At inválido deja Live abierto indefinidamente. El componente no corrige el orden de las fechas automáticamente.
Zona horaria
Time Zone usa Viewer de forma predeterminada. Elige Fixed para mostrar la fecha con IANA Zone, inicialmente America/Mexico_City. Show Date está desactivado inicialmente y permite mostrar la fecha del siguiente cambio de fase cuando existe.
Time Zone solo cambia el formato de la fecha. No desplaza el instante programado ni crea una cuenta regresiva diferente según la hora local del visitante. Confirma la hora real en el selector de fecha antes de probar el calendario.
Simulación
Estos son los Property Controls de la cápsula. La demo interactiva también tiene una barra de controles independiente, descrita a continuación.
| Propiedad | Opciones o rango | Predeterminado | Descripción |
|---|---|---|---|
| Preview | Real Time, Simulate | Simulate | Usa el reloj real o inspecciona una fase representativa. |
| State | Teaser, Preorder, Live, Closed | Live | Estado mostrado durante la simulación. |
| Progress | 0–100% | 64% | Posición dentro de la fase simulada. |
| Sim Outside | On / Off | Off | Permite simular en Preview y en el sitio, además de Canvas. |
La simulación permite revisar textos y distribución sin cambiar las fechas. Inicialmente se limita a Canvas; Preview usa el calendario real. Activar Sim Outside permite simular también en el sitio. Déjalo desactivado para una campaña real y verifica con Preview en Real Time.
Cómo usar la demo interactiva
La demo abre en un estado Live congelado, con ancho Wide y apariencia Chrome. Su barra ofrece:
- State — frozen for inspection: Teaser, Preorder, Live y Closed mantienen un estado representativo para revisar textos y distribución.
- Transition — real time: Teaser → Preorder, Preorder → Live, Live → Closed, Open already closed y Full cycle inician calendarios de demostración. Elegir el mismo escenario lo reinicia.
- Width — drives the responsive layout: Wide, 768, 375 y 320 cambian el ancho del contenedor de la demo.
- Appearance: Chrome, Lime, Champagne, Dense spacing y Bar motion cambian la presentación de la demo.
La barra proporciona su propio calendario de muestra y ajustes de simulación. Su vista Live congelada es independiente de las fechas de diciembre predeterminadas de la cápsula. Para configurar una campaña real, agrega Launch Drop Capsule y utiliza Live At, los grupos de texto y CTA por fase, y los demás Property Controls de esta guía. La barra de demo no forma parte de una cápsula insertada normalmente.
Textos y llamadas a la acción
Cada fase tiene su propio grupo de textos. Teaser y Preorder ofrecen Status, Label y Description. Live agrega No Close, la etiqueta para una fase activa sin cierre. Closed ofrece Status, Heading, Message y Description.
Los grupos Teaser CTA, Preorder CTA, Live CTA y Closed CTA contienen Enabled, Text, Link y Aria. Los textos predeterminados son GET NOTIFIED, PREORDER NOW, SHOP THE DROP y VIEW COLLECTION. Agrega destinos para las fases que uses.
New Tab está desactivado inicialmente y Arrow, activado. CTA Morph controla la transición de la acción al cambiar de fase y usa un resorte inicialmente. Cada CTA enlaza al destino que configures; la cápsula no recopila registros, procesa pagos ni crea una tienda.
Cuenta regresiva y línea de tiempo
| Propiedad | Opciones | Predeterminado | Descripción |
|---|---|---|---|
| Days / Hours / Minutes / Seconds | On / Off | On | Unidades que se muestran. |
| Labels | Full, Short, Hidden | Full | Estilo de las etiquetas de unidades. |
| Zeros | On / Off | On | Agrega ceros iniciales. |
| Day Digits | Auto, 2, 3 | Auto | Cantidad mínima de dígitos para los días. |
| Separator | Colon, Space | Colon | Separación entre unidades. |
| Timeline | On / Off | On | Muestra la línea de tiempo de las fases. |
| Phase Labels | On / Off | On | Muestra las etiquetas de fase en la línea de tiempo. |
| Scale | Equal, Real | Equal | Distribuye las fases por igual o según el calendario configurado. |
Scale → Real necesita un inicio Campaign válido y una fecha de cierre; de lo contrario, la línea de tiempo usa separación uniforme. Comunica el progreso de las fases y no funciona como botones de navegación.
Disponibilidad manual
| Propiedad | Opciones o rango | Predeterminado | Descripción |
|---|---|---|---|
| Availability | On / Off | On | Muestra el indicador cuando lo permite la regla de fase. |
| Show On | Live, Pre + Live, Always | Live | Fases en que aparece el indicador. |
| Mode | Progress, Remaining | Remaining | Muestra un porcentaje reclamado o una cantidad restante. |
| Claimed | 0–100% | 67% | Porcentaje manual para el modo Progress. |
| Remaining | 0–1,000,000 | 84 | Cantidad manual para el modo Remaining. |
| Total | 0–1,000,000 | 250 | Cantidad total para el modo Remaining. |
| Meter Label | Texto | AVAILABILITY INDICATED | Etiqueta junto al indicador. |
| Disclosure | On / Off | On | Muestra la aclaración. |
| Disclosure Text | Texto | Manually updated; not real-time inventory. | Explica el origen y significado de la cantidad. |
| Bar Motion | On / Off | Off | Anima el patrón decorativo sin cambiar el valor. |
Usa solo cantidades que puedas mantener correctas. Activar Bar Motion no simula ventas ni reduce la cantidad restante.
Apariencia y animación
En Preset, elige Chrome / Red, Lime / Black, Champagne / Black o Custom. Custom muestra los colores Background, Foreground, Accent, Muted y Border.
Radius comienza en 14 px; Padding, en 24 px; Outer Border, activado; Density, en Comfortable; y Chrome Text, activado. Density también ofrece Compact. Typeface cambia la familia tipográfica; sin ajustes, el componente carga Poppins y tiene fuentes de respaldo.
Celebration está activado inicialmente con Trigger → Live, Style → Sparks e Intensity → Low. Puedes elegir Preorder o Closed como evento de activación, Confetti como estilo e intensidad Medium.
La celebración se ejecuta cuando una página abierta detecta el cambio real de fase. No se repite solo porque alguien llegue durante Live o selecciones un estado simulado. Las preferencias de movimiento reducido desactivan la celebración y las transiciones animadas. La representación estática no anima el reloj.
Adaptación a distintos tamaños
El componente mide su contenedor. Usa una distribución ancha a partir de 900 px, intermedia entre 600 y 899 px y compacta por debajo de 600 px. La cuenta regresiva ajusta los dígitos y la separación al espacio disponible; las distribuciones estrechas reducen el espacio interior y reorganizan las secciones.
Usa altura ajustada al contenido para que quepan textos, línea de tiempo e indicador de disponibilidad. Los CTA largos, muchos dígitos de cuenta regresiva y contenedores estrechos requieren una revisión en Preview. Density → Compact es útil en secciones más ajustadas.
Usos recomendados
Usa una cápsula para un lanzamiento de producto, una colección temporal, un periodo de registro o una preventa. Enlaza el CTA activo a la página de registro, preventa, tienda o archivo correspondiente. Mantén consistentes las fechas y los destinos.
Para un lanzamiento sin cierre, desactiva Closing. Para uno sin preventa, desactiva Preorder. Oculta Availability cuando no tengas una cantidad manual útil que mostrar.
Buenas prácticas
- Reemplaza todas las fechas de muestra y revisa la zona horaria prevista.
- Prueba los textos y CTA de cada fase en simulación; después verifica Real Time.
- Mantén Sim Outside desactivado en campañas reales.
- Conserva una aclaración honesta de disponibilidad y actualiza tú las cantidades.
- Usa CTA breves y revisa el contraste de los colores personalizados.
Accesibilidad
La cápsula ofrece un resumen textual del estado y la cuenta regresiva. Los cambios de fase usan anuncios discretos en lugar de anunciar cada segundo. El indicador de disponibilidad expone información de progreso, y los CTA con enlace admiten una etiqueta Aria personalizada y foco visible con teclado.
Las preferencias de movimiento reducido suprimen la celebración y las transiciones animadas. La presentación decorativa del reloj se acompaña de texto legible. Revisa el contraste de tu paleta y escribe etiquetas de CTA que identifiquen sus destinos.
Solución de problemas
Preview muestra Teaser aunque seleccioné Live
En la cápsula independiente, State corresponde a la simulación. Sim Outside está desactivado inicialmente, por lo que Preview usa las fechas reales. Usa Canvas para inspeccionar estados simulados o activa Sim Outside para pruebas y vuelve a desactivarlo después. En la demo interactiva, usa la barra State; esta proporciona sus propios ajustes de simulación.
Solo veo Start On, Start Width y ajustes de demo
Seleccionaste el contenedor de demostración. Agrega Launch Drop Capsule para acceder a los controles de calendario, textos por fase, CTA, disponibilidad y apariencia.
No aparece la cuenta regresiva o el calendario está sin configurar
Establece un Live At válido. Una fase Live sin cierre muestra la etiqueta No Close en lugar de la cuenta regresiva; Closed muestra el mensaje de cierre.
Se omite la preventa o la fase de cierre
Comprueba que Preorder At sea anterior a Live At y Close At sea posterior. Los límites opcionales inválidos se omiten. Revisa también Preorder y Closing.
Cambiar Time Zone no cambia la cuenta regresiva
Ese control solo cambia cómo se muestra la fecha. Edita las fechas del calendario para cambiar el instante del lanzamiento.
El CTA parece desactivado
Completa Link en el grupo CTA de la fase actual. Enabled sin un destino produce una acción inactiva. Verifica el enlace en Preview.
La disponibilidad no cambia después de una venta
Es un indicador manual. Actualiza Remaining, Total o Claimed, u oculta Availability si no puedes mantener la información al día.
Confetti no se reproduce cuando abro la página
Celebration necesita que la página abierta detecte el cambio de fase configurado. No se activa al llegar, durante la representación estática, al cambiar estados simulados ni con movimiento reducido habilitado.
Preguntas frecuentes
¿Puedo lanzar sin preventa?
Sí. Desactiva Preorder y la cuenta de Teaser apuntará directamente a Live At.
¿Puede Live permanecer abierto indefinidamente?
Sí. Desactiva Closing. Live usará No Close en lugar de una cuenta regresiva hacia el cierre.
¿Se conecta al inventario de mi tienda?
No. Las cantidades de Availability se introducen manualmente. Los enlaces pueden llevar a tu tienda, pero la cápsula no sincroniza existencias.
¿Cada fase puede tener un botón diferente?
Sí. Cada fase tiene su grupo CTA con texto, destino, estado habilitado y una etiqueta Aria opcional.
¿Cada visitante recibe una hora de lanzamiento local diferente?
No. El calendario utiliza instantes absolutos. Viewer y Fixed controlan cómo se muestra la fecha.
¿Puedo revisar todos los estados sin cambiar las fechas?
Sí. Usa Preview → Simulate y elige State y Progress en Canvas.
¿Puedo desactivar la celebración o la línea de tiempo?
Sí. Celebration y Timeline tienen interruptores independientes. El movimiento reducido también suprime la celebración.
Limitaciones
El componente presenta una campaña programada; no procesa compras, guarda registros, sincroniza inventario ni controla el acceso desde un servidor. Depende del reloj del dispositivo del visitante. La disponibilidad es manual. La simulación puede aparecer en el sitio si Sim Outside está activado. La secuencia de fases es fija: Teaser, Preorder opcional, Live y Closed opcional.
Registro de cambios
v1.0
Primera versión documentada de Launch Drop Capsule.
- Fases programadas Teaser, Preorder opcional, Live y Closed opcional.
- Cuenta regresiva, textos y enlaces CTA por fase y línea de tiempo opcional.
- Indicador de disponibilidad manual, simulación en Canvas, distribuciones adaptables y celebración opcional al cambiar de fase.
arforgelabs.support@proton.me