devtemdesign

v0.0.2

Published

13 days ago

One configuration schema. Infinite animated synthesis. A lightweight, zero-config animated page engine with glass-morphism, ambient motion, and reactive component schema.

0High
0Medium
0Low

fscss-ttr

animation ui-engine fscss glassmorphism landing-page template-engine css-framework javascript zero-config declarative-ui motion-design cyberpunk design-system component-engine

devtemDesign

One configuration schema. Infinite animated synthesis.

devtemDesign is a lightweight, zero-configuration animated page engine. Stop building standard UI boilerplate — let the engine paint the viewport with dynamic templates, glassmorphism, ambient motion, and a reactive component schema.

npm: npm i devtemdesign
CDN: design.devtem.org
GitHub: github.com/devtem-dev/devtemDesign

Features

4 Dynamic Templates — cyber, figsh, aurora, monochrome — switch themes instantly.
Ambient Micro-Interactions — custom magnetic cursor, ripple effects, and floating orb backgrounds.
Component Schema — inject features, panels, brand tickers, and navigation from a single config object.
Mobile Navigation — hamburger menu with animated open/close, auto-closes on link tap.
Declarable Footer — full column layout, social icons, legal links, and tagline — all from config.
Zero Runtime Bundles — pure CSS/JS. Intersection Observer + CSS variables drive everything.
Declarative API — one function call builds the complete animated layout.

Quick Start

1. Add CDN links to your HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/script.js"></script>

2. Call the engine with your content

<div id="app-root"></div>
<script>
  devtemDesign("app-root", {
    template: "cyber",
    logoName: "DEVTEM",
    navLinks: [
      { label: "Docs",    href: "/docs"    },
      { label: "Sandbox", href: "/sandbox" },
      { label: "API",     href: "/api"     }
    ],
    ctaText: "CDN →",
    // ... see full config below
  });
</script>

Configuration Reference

devtemDesign(containerId, config)

Core

| Property | Type | Default | Description | |----------|------|---------|-------------| | template | string | "figsh" | Visual theme: "figsh", "cyber", "aurora", "monochrome" | | logo | string | fscss logo | URL for navbar/footer logo image | | logoName | string | "CORE" | Brand name displayed in navbar & footer |

Navigation

| Property | Type | Default | Description | |----------|------|---------|-------------| | navLinks | string[] \| object[] | ["Discover","Studio","Archive","Journal"] | Nav items. Pass plain strings or { label, href } objects | | ctaText | string | "Launch →" | Navbar call-to-action button text (supports HTML) |

navLinks accepts both formats:

// Plain strings (href defaults to "#")
navLinks: ["Docs", "Sandbox", "API"]

// Objects with href
navLinks: [
  { label: "Docs",    href: "/docs"    },
  { label: "npm",     href: "https://npmjs.com/package/devtemdesign" }
]

Hero

| Property | Type | Default | Description | |----------|------|---------|-------------| | heroTag | string | "design engine active" | Eyebrow tag above the main title | | heroTitleLine1 | string | "Generative" | First part of the H1 | | heroTitleLine2 | string | "Page Weaver" | Second part — rendered as gradient text | | heroSubtitle | string | default description | Supporting paragraph below H1 | | primaryBtnText | string | "Explore Templates" | Main hero button (supports HTML) | | secondaryBtnText | string | "Docs →" | Secondary hero button (supports HTML) | | brands | string[] | [] | Brand names for ticker marquee + hero chips | | brandsSubtitle | string | "global innovators, design pioneers" | Caption below brand chips |

Features Grid

| Property | Type | Default | Description | |----------|------|---------|-------------| | featuresSectionLabel | string (HTML) | "core modules" | Label above the grid (supports HTML / icons) | | featuresSectionTitle | string | default title | Heading for the features section | | features | object[] | [] | { title, desc, icon } — icon accepts HTML or emoji |

Panels

| Property | Type | Default | Description | |----------|------|---------|-------------| | panels | object[] | [] | { tag, title, desc } for additional content blocks |

Footer

The footer is fully declarable via a footer config object. All fields are optional — omit any you don't need.

footer: {
  tagline:  "Short brand tagline displayed below the logo.",
  copy:     "© 2025 Figsh Digital. All rights reserved.",

  columns: [
    {
      heading: "Product",
      links: [
        { label: "Documentation", href: "/docs"      },
        { label: "Sandbox",       href: "/sandbox"   },
        { label: "Changelog",     href: "/changelog" }
      ]
    },
    {
      heading: "Company",
      links: [
        { label: "About",   href: "/about"   },
        { label: "Blog",    href: "/blog"    },
        { label: "Contact", href: "/contact" }
      ]
    }
  ],

  social: [
    { icon: "fab fa-github",  href: "https://github.com/devtem-dev", label: "GitHub"  },
    { icon: "fab fa-twitter", href: "https://twitter.com/devtemple", label: "Twitter" },
    { icon: "fab fa-npm",     href: "https://npmjs.com/package/devtemdesign", label: "npm" }
  ],

  legal: [
    { label: "Privacy Policy", href: "/privacy" },
    { label: "Terms of Use",   href: "/terms"   },
    { label: "License (MIT)",  href: "/license" }
  ]
}

Legacy support: config.footerCopy (plain string) is still accepted as a fallback copyright line — no breaking change.

Full Example

devtemDesign("app-root", {
  template: "cyber",
  logoName: "⍲ DEVTEM",

  navLinks: [
    { label: "Docs",    href: "/docs"    },
    { label: "Sandbox", href: "/sandbox" },
    { label: "API",     href: "/api"     },
    { label: "npm",     href: "https://npmjs.com/package/devtemdesign" }
  ],
  ctaText: "<i class='fab fa-npm'></i> npm i devtemdesign",

  heroTag:         "Core Framework Alpha // v0.0.2",
  heroTitleLine1:  "Declarative UI,",
  heroTitleLine2:  "Zero-Config Motion",
  heroSubtitle:    "One configuration schema. Infinite animated synthesis.",
  primaryBtnText:  "<i class='fas fa-book'></i> Get Started",
  secondaryBtnText:"<i class='fas fa-copy'></i> Copy CDN",
  brandsSubtitle:  "Powered by open source",
  brands:          ["NPM", "FSCSS", "DEVTEMPLE", "ESBUILD", "CSS3", "WEBGL"],

  featuresSectionLabel: "<i class='fas fa-code-branch'></i> CORE MECHANICS",
  featuresSectionTitle: "Pass raw data. The engine paints itself.",
  features: [
    { title: "Deterministic Schema",  desc: "Map JSON to hardware-accelerated layouts.",   icon: "<i class='fas fa-cube'></i>"   },
    { title: "Micro-Interactions",    desc: "Magnetic cursor + ripple effects + parallax.", icon: "<i class='fas fa-magic'></i>"  },
    { title: "Adaptive Themes",       desc: "Switch tokens at runtime across all layers.",  icon: "<i class='fas fa-palette'></i>"}
  ],
  panels: [
    { tag: "FRAMEWORK API", title: "devtemDesign({...})", desc: "Single handler, complete layout." },
    { tag: "PERFORMANCE",   title: "Passive Inertia",     desc: "Intersection Observer + CSS variables." }
  ],

  footer: {
    tagline: "Declarative UI engine for the modern web.",
    columns: [
      { heading: "Product", links: [
        { label: "Docs",      href: "/docs"      },
        { label: "Sandbox",   href: "/sandbox"   },
        { label: "Changelog", href: "/changelog" }
      ]},
      { heading: "Resources", links: [
        { label: "npm",       href: "https://npmjs.com/package/devtemdesign" },
        { label: "GitHub",    href: "https://github.com/devtem-dev/devtemDesign" },
        { label: "DevTemple", href: "https://devtem.org" }
      ]}
    ],
    social: [
      { icon: "fab fa-github",  href: "https://github.com/devtem-dev", label: "GitHub"  },
      { icon: "fab fa-twitter", href: "https://twitter.com/devtemple", label: "Twitter" }
    ],
    legal: [
      { label: "Privacy", href: "/privacy" },
      { label: "Terms",   href: "/terms"   }
    ],
    copy: "© 2025 Figsh Digital · MIT License"
  }
});

Built-in Templates

| Template | Vibe | Accent Colors | |----------|------|---------------| | figsh | Futuristic glass | Cyan / Purple / Pink | | cyber | Neon cyberpunk | Cyan / Magenta / Red | | aurora | Organic nature | Emerald / Violet / Blue | | monochrome | Minimalist grayscale | White / Silver |

For Developers

File Structure

devtemDesign/
├── style.css    # animations, glass effects, grid, marquee, cursor, footer, mobile nav
├── script.js    # engine core — devtemDesign() + interaction handlers + hamburger
└── README.md    # you're reading it

How to Contribute

Fork the repo: github.com/devtem-dev/devtemDesign
Create a branch: git checkout -b feature/amazing-addon
Commit: git commit -m 'Add some amazing thing'
Push & open a Pull Request

Ideas for contribution:

New templates (pastel, vintage, dark-mono)
Extra config options (enableParallax, marqueeSpeed, stickyNav)
Additional footer layout variants
Accessibility enhancements (ARIA, focus management)

Local Development

git clone https://github.com/devtem-dev/devtemDesign.git
cd devtemDesign
# Open index.html in browser — no build step needed

CDN Usage (jsDelivr)

<!-- Pinned version (recommended) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/script.js"></script>

<!-- Latest (auto-updates) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign/style.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign/script.js"></script>

Font Awesome is required for icon support in features, nav CTA, and footer socials:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Official Site & Demo

Live examples and interactive playground: design.devtem.org

License

Acknowledgments

Built with vanilla CSS/JS — no frameworks, no bloat. Inspired by glassmorphism, orbital animations, and the need for a declarative page builder that actually ships fast.