- Svelte 62.8%
- TypeScript 22.5%
- CSS 8.2%
- GLSL 6.1%
- HTML 0.3%
- Other 0.1%
|
wukko
ec7c29b3f3
- rewrite to shader fixes shimmer performance in Firefox, and possibly lower end devices in general. decided to use OGL.js for this to avoid extra boilerplate. there are no noticeable visual changes to the shimmer effect. - fade on mount prevents rapid snap-in when loading a web page on slow internet connection. |
||
|---|---|---|
| docs | ||
| scripts | ||
| src | ||
| .gitignore | ||
| deno.json | ||
| index.html | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| svelte.config.js | ||
| tsconfig.json | ||
| vite.config.ts | ||
| wrangler.json | ||
Helium Prism
Helium Prism
Shared UI components of Helium web interfaces for Svelte.
Prism UI library contains the shared building blocks used by web-based Helium applications and websites, such as: typography, buttons, inputs, loading states, icons, and the brand gradient shimmer effect.
This library isn't built for use outside of Helium web apps, so it may feel clunky for anything else.
Demo: prism.helium.computer
npm: @imput/helium-prism
Installation
deno:
deno add npm:@imput/helium-prism
pnpm:
pnpm add @imput/helium-prism
npm:
npm i @imput/helium-prism
Basic usage
Import the stylesheet once near the root of your app:
<script>
import "@imput/helium-prism/styles.css";
</script>
Then import components from the package root:
<script>
import { Button } from "@imput/helium-prism";
</script>
<Button primary>Button</Button>
<Button>Button 2</Button>
You can also import all components at once if you're a madman or have an actual reason to do so (such as for demo purposes):
<script>
import * as Prism from "@imput/helium-prism";
</script>
<Prism.Button primary>Button</Prism.Button>
<Prism.Button>Button 2</Prism.Button>
API docs
Sample usage of components is documented in docs/api.md.
License
Helium Prism is licensed under GPL-3.0, just like the rest of Helium. See LICENSE.