building a declarative animated page engine — one config object, full UI

#webdev #javascript #opensource #css

I got tired of writing the same boilerplate — nav, hero, orbs, cursor, footer — every time I started a new landing page. So I built a tool that removes all of it.

devtemDesign is a zero-dependency, zero-bundler page engine. You pass it a config object. It renders a full animated page — glassmorphism nav, ambient orb backgrounds, magnetic cursor, features grid, marquee ticker, and a professional multi-column footer. Everything.

devtemDesign("app-root", {
  template: "cyber",
  logoName: "MYAPP",
  heroTitleLine1: "Ship faster",
  heroTitleLine2: "with less code",
  features: [
    { title: "Zero Config", desc: "Pass JSON, get a page.", icon: "⚡" }
  ]
});

That's it. That's the whole setup.

What it renders

Fixed glass navbar — with logo, nav links (string or { label, href } objects), and a CTA button. Animates in on load.
Mobile hamburger menu — animated open/close drawer, auto-closes on link tap.
Full-viewport hero — H1 with gradient word, eyebrow tag, subtitle, two CTA buttons, optional brand chips.
Brand marquee ticker — infinite scroll loop, auto-populated from your brands array.
Features grid — auto-fit responsive card layout with scroll-reveal animations.
Panels section — numbered content blocks for secondary features or use-cases.
Declarable footer — multi-column link layout, social icon buttons, legal strip, tagline. All from config.
Ambient orbs — four drifting radial gradients in the background layer.
Custom cursor + ripple — magnetic dot + ring cursor, click ripples. Hides on touch devices automatically.

Four built-in templates

Switch themes with a single token:

// "figsh" | "cyber" | "aurora" | "monochrome"
devtemDesign("app-root", { template: "aurora", ... });

Each template injects a complete set of CSS custom properties onto :root:

Token	Vibe
`figsh`	Futuristic glass — cyan / purple / pink on midnight
`cyber`	Neon cyberpunk — raw cyan / magenta on near-black
`aurora`	Organic — emerald / violet / blue on deep teal
`monochrome`	Minimalist — white / silver on near-black

The footer schema

The footer is fully declarable —every column, every link, social icons, and the legal strip:

footer: {
  tagline: "Declarative UI engine for the modern web.",
  columns: [
    {
      heading: "Product",
      links: [
        { label: "Documentation", href: "/docs"    },
        { label: "Sandbox",       href: "/sandbox" },
        { label: "Changelog",     href: "/changelog" }
      ]
    },
    {
      heading: "Resources",
      links: [
        { label: "GitHub",    href: "https://github.com/devtem-dev/devtemDesign" },
        { label: "npm",       href: "https://npmjs.com/package/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 Policy", href: "/privacy" },
    { label: "Terms of Use",   href: "/terms"   }
  ],
  copy: "© 2026 Figsh · MIT License"
}

Legacy config.footerCopy still works as a plain-string fallback — no breaking change.

navLinks — string or object

Plain strings default to href="#". Pass objects for real routing:

// Both formats work in the same array
navLinks: [
  { label: "Docs",    href: "/docs"    },
  { label: "API",     href: "/api"     },
  "Sandbox"   // ← href defaults to "#"
]

No build step

The entire is two files:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/style.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/script.js"></script>

Drop them in any HTML file. No Node, no bundler, no framework. Works in a static file server, a Netlify deploy, or a plain index.html opened in a browser.

Font Awesome is optional — only needed if you use <i> icon tags in icon, ctaText, or footer social:

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

The sandbox

There's an interactive playground at design.devtem.org/sandbox — edit the config in the left pane, hit Run (or Ctrl+Enter), and the right pane renders a live iframe preview. Template switcher pills let you hot-swap themes without touching the code.