Astro

Jolocky footers are React components, so in Astro they run as islands: the rest of the page stays static HTML, and only the footer is hydrated in the browser.

1. Create an Astro Project with React and Tailwind CSS#

Skip this step if your project already has the React integration and Tailwind CSS. Otherwise:

pnpmnpmyarnbun
pnpm create astro@latest my-site --template with-tailwindcss --install --add react --git
Copy

Tailwind CSS is required by the shadcn CLI setup, not by the footers themselves.

2. Add an Import Alias#

The shadcn CLI needs an import alias. Add one to tsconfig.json:

Copy{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Keep the existing extends, include, and other settings in the file.

3. Initialize the shadcn CLI#

pnpmnpmyarnbun
pnpm dlx shadcn@latest init
Copy

4. Install a Footer#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://www.jolocky.com/r/aurora-drift.json
Copy

For Pro items, see CLI for how to pass your license key. Use https://www.jolocky.com with www.

5. Render It with a Client Directive#

Import the footer into an .astro file and add a client directive so its animation runs in the browser. client:visible hydrates the footer when it scrolls into view; client:load hydrates it right away.

Copy---
import { AuroraDriftFooter } from "@/components/footers/aurora-drift";
---
 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Site</title>
  </head>
  <body>
    <main>
      <h1>Hello</h1>
    </main>
    <AuroraDriftFooter client:visible />
  </body>
</html>

Without a client directive, Astro renders the footer as static HTML and ships none of its JavaScript, so canvas drawing, pointer effects, and form handling do not run.