Ponlo en tu web.

<!-- 1. Una vez por página, antes de </body> -->
<script src="https://cdn.jsdelivr.net/npm/@hostarys/marciano@1/dist/vendor/marciano-flame.min.js" defer></script>

<!-- 2. Donde quieras que aparezca -->
<marciano-flame color="hostarys" glow></marciano-flame>

El script sale de npm a través de jsDelivr, fijado a la versión mayor (@1: recibe mejoras y arreglos, nunca cambios incompatibles). También vale unpkg (unpkg.com/@hostarys/marciano@1/dist/vendor/marciano-flame.min.js) o la copia de esta web, marciano.hostarys.com/v1/marciano-flame.min.js (versión 1.1.0). Para depurar, quita el .min. ¿Prefieres alojarlo tú? Descarga marciano-flame.js.

Dale personalidad

Elige expresión, accesorios, temporada o brillo con atributos. Todos están en Props y API, y puedes probarlos en el playground.

<marciano-flame
  color="hostarys"
  mood="happy"
  accessory="crown"
  season="auto"
  glow></marciano-flame>

<script>
  customElements.whenDefined("marciano-flame").then(() => {
    const m = document.querySelector("marciano-flame");
    m.say("¡Hola!");                  // bocadillo
    m.queue("surprised", "hearts");   // añadir a la cola
    m.play("wink");                   // interrumpir y reproducir ya
  });
</script>

1. Instala

   npm install @hostarys/marciano
   # o
   pnpm add @hostarys/marciano
   yarn add @hostarys/marciano
   bun add @hostarys/marciano

2. Úsalo

   Marciano ya es un Client Component: impórtalo tal cual en un Server Component del App Router.

   // app/page.tsx  (Server Component, sin "use client")
   import { Marciano } from "@hostarys/marciano";
   
   export default function Page() {
     return <Marciano color="hostarys" glow accessory="crown" size={180} />;
   }

   En vivo

Controlarlo con useMarciano()

El hook devuelve [ref, controles]. Los controles esperan solos a que el componente termine de cargar, así que puedes llamarlos incluso en el primer useEffect.

"use client";
import { Marciano, useMarciano } from "@hostarys/marciano";

export function MarcianoSaluda() {
  const [ref, marciano] = useMarciano();
  return (
    <div>
      <Marciano ref={ref} color="hostarys" glow size={150} />
      <button onClick={() => marciano.play("hearts")}>Enamorar</button>
      <button onClick={() => marciano.say("¡Hola!")}>Saludar</button>
      <button onClick={() => marciano.queue("surprised", "happy")}>Cola</button>
    </div>
  );
}

Con shadcn/ui

¿Tu proyecto usa shadcn/ui? Marciano tiene su propio registro: la CLI instala @hostarys/marciano y te deja en components/marciano.tsx un envoltorio con los valores de la marca (color Hostarys, brillo, 160 px) que puedes ajustar a tu gusto. Acepta las mismas props, y exporta también useMarciano.

npx shadcn@latest add https://marciano.hostarys.com/r/marciano.json
# o: pnpm dlx shadcn@latest add … · bunx shadcn@latest add …

// components/marciano.tsx lo crea shadcn (puedes editarlo: es tu código)
import { Marciano } from "@/components/marciano";

export default function Page() {
  return <Marciano mood="happy" season="auto" />;
}

El registro es público: /r/marciano.json (elemento) y /r/registry.json (índice).

// main.ts
import { createApp } from "vue";
import { MarcianoPlugin } from "@hostarys/marciano/vue";
import App from "./App.vue";

createApp(App).use(MarcianoPlugin).mount("#app");

<!-- App.vue -->
<script setup lang="ts">
import { ref } from "vue";
const m = ref();
const onMood = (e: CustomEvent) => console.log(e.detail.mood);
</script>

<template>
  <Marciano ref="m" color="hostarys" glow :size="180" @moodchange="onMood" />
  <button @click="m.play('hearts')">Enamorar</button>
</template>

¿Prefieres la etiqueta cruda <marciano-flame> en tus plantillas? Dile a Vue que es un custom element:

// vite.config.ts — solo si usas la etiqueta <marciano-flame> directamente
import vue from "@vitejs/plugin-vue";

export default {
  plugins: [vue({
    template: { compilerOptions: { isCustomElement: tag => tag === "marciano-flame" } },
  })],
};

npm install @hostarys/marciano

<!-- +page.svelte (Svelte 5 / SvelteKit) -->
<script lang="ts">
  import { Marciano, type MarcianoExports } from "@hostarys/marciano/svelte";

  let m: MarcianoExports;
  let toques = $state(0);
</script>

<Marciano bind:this={m} color="hostarys" glow size={180} accessory={["crown"]}
  onpoke={e => (toques = e.detail.count)}
  onmoodchange={e => console.log(e.detail.mood)} />

<button onclick={() => m.play("hearts")}>Enamorar</button>
<p>Toques seguidos: {toques}</p>

Funciona con SvelteKit y SSR: en el servidor pinta la etiqueta con sus atributos y el componente se carga en el navegador. Los métodos (play, queue, say, enter, exit…) esperan solos a que esté listo; getElement() devuelve el <marciano-flame>. ¿Prefieres la etiqueta cruda? También vale el web component del apartado siguiente.

---
// src/pages/index.astro
---
<marciano-flame color="hostarys" glow></marciano-flame>

<script>
  import "@hostarys/marciano/element";
</script>

<!-- Marciano.svelte: la etiqueta cruda, sin el componente -->
<script>
  import "@hostarys/marciano/element";   // registra <marciano-flame>
</script>

<marciano-flame color="hostarys" mood="happy" glow></marciano-flame>

// main.js (Vite, webpack, esbuild…): registra <marciano-flame>
import "@hostarys/marciano/element";
import { MOODS } from "@hostarys/marciano/core";   // listas y utilidades, sin React

const m = document.createElement("marciano-flame");
m.setAttribute("color", "hostarys");
m.setAttribute("season", "auto");
document.body.append(m);
m.play(MOODS[Math.floor(Math.random() * MOODS.length)]);

// ¿Prefieres el script clásico? Viene en el paquete:
// node_modules/@hostarys/marciano/dist/vendor/marciano-flame.min.js
// (en Vite: import flameUrl from "@hostarys/marciano/marciano-flame.min.js?url")

Los atributos, métodos (play, queue, say…) y eventos son los mismos en todas partes: están en Props y API.

Todos los atributos y ejemplos en la referencia del shortcode.

Los textos completos van dentro del paquete (LICENSE y TRADEMARKS.md, también en npmjs.com). ¿Otro uso, o una duda? Escríbenos a hola@hostarys.com.