🧩 techz-render - Dynamic UI Components

techz-render is a modern, theme-aware, animation-powered JavaScript utility that injects UI components directly into the DOM. No need for pre-existing HTML — everything is created dynamically.

Built for sleek user experiences with built-in support for:

• Alerts
• Message Boxes
• Spinners
• Full-screen UI blockers

🚀 Features

• 🔥 Dynamic DOM insertion
• 🎨 Light/Dark theme support
• 💫 Smooth animations
• 🧱 Modular components
• 🧩 Fully customizable
• 📦 No external dependencies

📦 Installation

import Render from "https://cdn.skypack.dev/techz-render"

🧪 Quick Example

const ui = new Render();

ui.alert({
  theme: 'dark',
  variant: 'success',
  msg: 'Everything went well!',
  timeout: 4000
});

🧰 API Reference

🛎️ alert(options)

Shows a dismissible alert message with optional auto-dismiss.

ui.alert({
  theme: 'light', // or 'dark'
  variant: 'info', // 'success' | 'warning' | 'error'
  msg: 'This is an alert!',
  timeout: 3000 // milliseconds
});

💬 msg_box(options)

Creates a confirmation-style message box with title, message and actions.

ui.msg_box({
  theme: 'dark',
  title: 'Are you sure?',
  msg: 'This action cannot be undone.',
  action: {
    cancel: {
      text: 'Cancel',
      callback: () => console.log('Cancelled')
    },
    confirm: {
      text: 'Confirm',
      callback: () => console.log('Confirmed')
    }
  }
});

🔄 spinner(options)

Displays a loading spinner, optionally animated and themed.

ui.spinner({
  variant: 'dual', // 'simple' | 'dual' | 'triple' | 'custom'
  theme: 'dark',
  backdrop: true,
  events: {
    screen_click: {
      hide: true,
      destroy: false
    },
    auto__: {
      timer: 5000,
      hide: false,
      destroy: true
    }
  },
  text: {
    content: 'Loading...',
    animated: true,
    color: 'white'
  },
  custom: {
    url: 'https://yourdomain.com/spinner.svg',
    animation: 'pulse',
    color: '#00bfff'
  }
});

🚫 block_ui(options)

Displays a full-screen blocking overlay with animated backgrounds.

ui.block_ui({
  theme: 'dark', // or 'light'
  animation: 'particles', // 'particles' | 'lines' | 'shapes' | 'orbs'
  message: 'Please wait...',
  count: 80,
  events: {
    screen_click: {
      destroy: true
    },
    auto__: {
      timer: 5000,
      destroy: true
    }
  },
  custom: {
    __size: {
      min: 10,
      max: 60
    }
  }
});

🌍 Load Page (Optional Utility)

Loads HTML content into a container and optionally runs a callback.

ui.page('/my/page.html', document.getElementById('app'), () => {
  console.log('Page loaded!');
});

📌 Notes

• All components are dynamically styled using embedded CSS via JS.
• Themes:
  • light: Uses dark-colored elements over light backgrounds.
  • dark: Uses light-colored elements over dark backgrounds.

🧹 Cleanup

Every component returns an id, or a control object (destroy(), toggle()) for manual handling.

const { destroy } = ui.spinner(/*...*/);
destroy();

🧑‍💻 Author

Made by Mike DP
Feel free to customize and integrate into your modern JavaScript applications.