· · · · · · · · · · ·
· ·
· · - - - · - - - · - - - · - - · ·
· / \ ·
· · delicate threads · ·
· / catching \ ·
· the dawn ·
· \ / ·
· · - - - · - - - · - - - · - - - · ·
· ·
· · · · · · · · · · ·
╭─────────────╮
│ threads of │
│ light │
╰─────────────╯
Threads of light.
ASCII visual effects for the web. Character-based animations, ambient backgrounds, and image transformations powered by Canvas 2D. Simple, charming, performant.
Gossamer brings warmth and whimsy to web interfaces through 2D ASCII visual effects:
- 🌫️ Floating clouds — Ambient patterns using Perlin noise
- 🖼️ Image transformation — Convert photos to ASCII art
- ✨ Text effects — ASCII-styled typography
- 🎨 Overlay effects — Composite patterns over content
- 🔲 Decorative borders — Character-based frames
Built for Grove's Glass UI and beyond. Framework-agnostic core with official adapters for Svelte, React, and Vue.
- ✅ Framework-agnostic core — Use with any framework or vanilla JS
- ✅ 2D Canvas rendering — Fast, lightweight, no WebGL dependencies
- ✅ Multiple effect types — Clouds, images, text, overlays, borders
- ✅ Pattern generators — Perlin noise, waves, static, and custom patterns
- ✅ Performance-optimized — Cell-based rendering, FPS limiting, visibility detection
- ✅ Accessibility-first — Respects
prefers-reduced-motion, decorative-only - ✅ TypeScript support — Full type definitions included
- ✅ Preset system — Grove-themed presets (mist, fireflies, rain, snow, etc.)
pnpm add gossamer
# or
npm install gossamer
# or
yarn add gossamer# Svelte 5
pnpm add @gossamer/svelte
# React (coming soon)
pnpm add @gossamer/react
# Vue (coming soon)
pnpm add @gossamer/vue<script>
import { GossamerClouds, GossamerImage } from '@gossamer/svelte';
</script>
<!-- Ambient background -->
<GossamerClouds
pattern="perlin"
characters=" ·∙•"
color="var(--grove-green)"
opacity={0.15}
/>
<!-- Image transformation -->
<GossamerImage
src="/avatar.jpg"
alt="User avatar"
cellSize={4}
showOriginalOnHover
/>import { GossamerRenderer, generatePatternData } from 'gossamer';
const canvas = document.getElementById('myCanvas');
const renderer = new GossamerRenderer(canvas, {
characters: ' ·∙•◦○◉●',
cellSize: 12,
color: '#22c55e'
});
// Render animated clouds
renderer.startAnimation((time) => {
return generatePatternData(
canvas.width,
canvas.height,
'perlin',
time * 0.001,
{ frequency: 0.05, amplitude: 1.0, speed: 0.5 }
);
}, 30);Floating, organic ambient patterns for backgrounds.
<GossamerClouds
pattern="perlin"
characters=" ·∙•◦"
opacity={0.3}
animated
speed={0.5}
/>Convert images to ASCII art representations.
<GossamerImage
src="/photo.jpg"
alt="Photo description"
cellSize={4}
showOriginalOnHover
/>Apply ASCII-style rendering to text elements.
<GossamerText text="GROVE" preset="block-art" />Composite ASCII effects over existing content.
<GossamerOverlay
pattern="waves"
blendMode="soft-light"
opacity={0.2}
/>ASCII-styled borders and frames.
<GossamerBorder style="dots" animated />Gossamer includes seasonal and themed presets:
| Preset | Description | Characters | Animation |
|---|---|---|---|
grove-mist |
Soft fog effect | ·∙•◦ |
Slow drift |
grove-fireflies |
Twinkling points | ·*✦✧ |
Random flicker |
grove-rain |
Gentle rain lines | │|/ |
Downward flow |
winter-snow |
Falling snow | ·∙*❄ |
Drift + fall |
autumn-leaves |
Scattered leaves | 🍂·∙ |
Tumble |
spring-petals |
Floating petals | ·✿❀ |
Float + spin |
summer-heat |
Heat shimmer | ~≈∿ |
Wave distortion |
<GossamerClouds preset="grove-mist" />- 📖 Full Specification — Complete technical spec
- 🎨 API Reference — Detailed API documentation (coming soon)
- 🧪 Examples — Interactive demos and use cases
- 🔧 Contributing — Contribution guidelines (coming soon)
# Clone the repository
git clone https://github.com/AutumnsGrove/Gossamer.git
cd Gossamer
# Install dependencies
pnpm install
# Build packages
pnpm build
# Run tests
pnpm test
# Start development server
pnpm devGossamer/
├── packages/
│ ├── core/ # gossamer (vanilla JS/TS)
│ ├── svelte/ # @gossamer/svelte
│ ├── react/ # @gossamer/react (future)
│ └── vue/ # @gossamer/vue (future)
├── examples/
│ ├── vanilla/ # Plain HTML/JS examples
│ ├── svelte-kit/ # SvelteKit integration
│ └── next-js/ # Next.js integration (future)
├── docs/ # Documentation
└── tests/ # Test suites
Gossamer works in all modern browsers that support:
- HTML5 Canvas API
- ResizeObserver API
- IntersectionObserver API
Supported:
- Chrome/Edge 76+
- Firefox 69+
- Safari 13+
- Opera 63+
Gossamer is optimized for smooth animations even on lower-end devices:
- Cell-based rendering — Reduces pixel operations by 8-16x
- FPS limiting — Default 30fps for ambient effects
- Visibility detection — Pauses animations when off-screen
- Lightweight — Core library < 15KB gzipped
- No dependencies — Uses native Canvas API
Gossamer follows accessibility best practices:
- ✅ All effects are decorative-only (
aria-hidden="true") - ✅ Respects
prefers-reduced-motionsystem preference - ✅ Never conveys information through effects alone
- ✅ Effects never obscure focus indicators
- ✅ Semantic HTML preserved in all components
- Core rendering engine
- GossamerClouds component
- GossamerImage component
- Svelte 5 adapter
- Preset system
- Documentation site
- GossamerText component
- GossamerOverlay component
- GossamerBorder component
- React adapter
- Vue adapter
- Three.js/Threlte integration
- WebGL shader-based rendering
- 3D ASCII post-processing
- Video source support
MIT License — see LICENSE for details.
Author: AutumnsGrove Repository: github.com/AutumnsGrove/Gossamer Icon: SprayCan (Lucide)
Inspired by:
Last Updated: January 2026 Status: v1.0 Draft — Core implementation in progress
Walk through the grove at dawn. Spider silk stretches between branches, nearly invisible until the light finds it. Delicate threads catching dew, glittering for a moment, then vanishing into the green. That's what Gossamer brings to interfaces.