Constructer

TypeScript library that supercharges SCSS with layered compositions, visual effects, and runtime SVG generation.

Installation

npm install constructer

Usage

SCSS

@use 'constructer' as c;

// Gradient backgrounds
.hero {
  @include c.c-gradient-mesh-neon();
}

// Glass morphism
.card {
  @include c.c-glass(12px, 0.1);
}

// Typography effects
.title {
  @include c.c-text-gradient-aurora();
  @include c.c-fluid-text(2rem, 4rem);
}

// Textures
.overlay {
  @include c.c-grain(0.05);
}

// Responsive
@include c.c-above('md') {
  .grid { columns: 3; }
}

Runtime (TypeScript/JavaScript)

import Constructer from 'constructer';

const { path, svg, filters, morph, timeline } = Constructer;

// Create SVG shapes
const star = path()
  .star(100, 100, 50, 25, 5)
  .build({ fill: '#667eea' });

// Apply filters
const { id, filter } = filters.glow(8, '#00f2fe');
filters.addFilterToSVG(mySvg, filter);
filters.applyFilter(star, id);

// Morph between shapes
await morph.morph(element, starPath, circlePath, {
  duration: 600,
  easing: 'ease-in-out'
});

// Timeline animations
timeline()
  .stagger(elements, keyframes, 400, 100)
  .play();

Debug Mode

Toggle debug overlay in browser console:

constructer_debug("true")   // Enable
constructer_debug("false")  // Disable

Shows FPS, scene/layer visualization, and live event log.

Features

SCSS Mixins

• Gradients: c-gradient-sunset, c-gradient-ocean, c-gradient-aurora, c-gradient-neon-*, c-gradient-mesh-*, c-gradient-animated
• Effects: c-glass, c-shadow, c-glow, c-blur
• Textures: c-grain, c-dots, c-grid, c-scanlines, c-stripes
• Typography: c-fluid-text, c-text-gradient-*, c-text-glow, c-truncate
• Responsive: c-above, c-below, c-between, c-fluid
• Scene: c-scene, c-layer, c-animate

Runtime API

• path(): Fluent API for building SVG paths
• svg: SVG element creation utilities
• filters: Blur, glow, drop shadow, color matrix
• morph: Smooth path morphing animations
• timeline: Animation sequencing and staggering
• scroll: Scroll-linked animations and parallax
• textPath: Text on path, circular text, wavy text
• input: Mouse/touch tracking, fluid drag effects
• events: Event system for scene lifecycle
• gesture: Touch gestures (tap, swipe, pinch, rotate, long-press)
• clip: SVG and CSS clip paths
• debug: Debug overlay with FPS, scene visualization, event log

License

MIT