Getting started

Install

Two files. jellyfy.css paints the controls. jellyfy.js runs the press and the loading lights, and it keeps a slider’s fill in step with the input.

Install the package

npm install jellyfy

With Tailwind

Import the stylesheet after Tailwind. A utility such as px-4 sets that padding. The press stays.

@import "tailwindcss";
@import "jellyfy/jellyfy.css";

Without Tailwind

Link the stylesheet on its own. The controls paint the same way.

<link rel="stylesheet" href="./node_modules/jellyfy/jellyfy.css" />

A bundler imports that same file.

import "jellyfy/jellyfy.css";

Call it once

Call startJellyfy() once, after the controls are on the page. A pointer press squashes the control under the pointer. Controls that appear later, including after a page change, are included. A later call is ignored. The full pages are in examples.

Plain HTML

<script type="module">
  import { startJellyfy } from "./node_modules/jellyfy/jellyfy.js";

  startJellyfy();
</script>

Vue

Import the stylesheet in the entry. Call the function when the app is mounted.

import { createApp } from "vue";

import App from "./App.vue";
import "jellyfy/jellyfy.css";

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

<script setup>
import { startJellyfy } from "jellyfy";
import { onMounted } from "vue";

onMounted(() => {
  startJellyfy();
});
</script>

React

Import the stylesheet after Tailwind. Call the function once from the root component.

import { startJellyfy } from "jellyfy";
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    startJellyfy();
  }, []);
}

Press any element

Add squish to give any element the same press. On a Jellyfy control it uses the face that control already has. Add it to a card when the card should press.

<article class="card squish">Notes</article>