SYSTEM COREDeveloper Blueprint

CRAFTING THE
CINEMATIC WEB

Welcome to the Radiuz Studio design guidelines. This page coordinates our architectural values: sharp brutalist layouts, complex glass textures, scarlet focal alerts, and dynamic physics-based micro-animations. Double-click any hex swatch or sandbox card to copy clean code snippets instantly.

01 // Foundations & Colors

RGB / HEX / HSL SPEC

Core Color Deck // Click to copy

Editorial Typography Scale & Interactive Playground

Scale Factor:1.00x

Line Height:1.20x

H1 // GIANT HEADLINE (6vw)

SHAPE THE FUTURE.

H2 // SECTION HEADER (2.6rem)

SELECTED MASTERPIECES

H3 // CARD TITLE (1.6rem)

Pixel-Perfect Next.js Engineering

Body // Outfit (13.5px)

Every detail is precision-engineered to prioritize speed and luxury aesthetics. We compose digital narratives that resonate with high-end audiences globally, ensuring your platform stands out in modern crowded viewports.

Technical // Noto Mono (11px)

COLLABORATE // DIRECT LINE // UTC+7 // PHNOM PENH, KH

02 // Immersive Surfaces & Frosted Glass

GLASSMORPHISM LAB

Glass Texture Refractor Playground

Backdrop Blur:40px

Saturation:1.6x

MATERIAL // CLASSIC FROSTED

LIGHT GLASS SURFACE

Multi-layer physical depth displaying micro-shadow elevations and high light refraction properties.

.premium-card // .premium-glass

MATERIAL // OBSIDIAN GLASS

DARK OBSIDIAN SURFACE

Highly editorial, ultra-dark backing providing dramatic backdrop shadows and crisp typography boundaries.

.premium-glass-dark

03 // Elite Interactive Components & Playground

LIVE INTERACTION PREVIEW

Rotating Conic Laser Button playground

Control Variables // Customize Label

Button Label Text:

• HOVER // Activates double-layered character slide-up animations.• CLICK // Disperses glowing scarlet micro-particles dynamically.

Technical Capsules & Badges

Live indicator capsule:

STUDIO STATUS // COORDS SECURED

Micro indicator badge:ENGINEERING // NEXT.JS

Text Shimmer sweep:PREMIUM REFRACTIVE HEADLINE

Grayscale → Color hover transition

HOVERED STATE

Immersive Button Variations Showcase5 Interactive Archetypes

Primary Laser

Secondary Frosted

Brutalist Minimal Slide

Editorial UnderlineVIEW PORTFOLIO↗

Glass Refractive

Premium Navigation Dock System

Translucent Off-White Material & Shared Layout Springs

ACTIVE IN PRODUCTION

LIVE TACTILE SIMULATION // HOVER & INTERACT

04 // Developer TSX Sandbox & Code Generator

COPY & PASTE SYSTEM

ButtonsREACT / TSX

Laser Chronos Button

Dual-orbit clockwise/counter-clockwise rotating laser borders, technical capsule, letter-spacing breathing, metallic chronos sheen sweep, and tactile active depression.

import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";

export default function LaserButton() {
  return (
    <motion.a
      href="#"
      className="premium-btn-refractor group"
      whileTap={{ scale: 0.96 }}
    >
      {/* Dual-orbit rotating laser backing border */}
      <span className="premium-btn-refractor-border" />

      {/* Obsidian inner content container with sweep sheen */}
      <div className="premium-btn-refractor-content">
        {/* Technical live dot indicator */}
        <div className="live-dot-capsule">
          <span className="live-dot-indicator" />
          <span>LIVE</span>
        </div>

        {/* Sliding characters with breathing spacing */}
        <span className="letter-slide-container">
          {"LAUNCH SYSTEM".split("").map((char, index) => (
            <span 
              key={index} 
              className="letter-slide-char" 
              style={{ "--delay": `${index * 0.025}s` } as React.CSSProperties}
            >
              <span className="letter-slide-char-top">
                {char === " " ? "\u00A0" : char}
              </span>
              <span className="letter-slide-char-bottom">
                {char === " " ? "\u00A0" : char}
              </span>
            </span>
          ))}
        </span>

        {/* Dynamic sliding arrow */}
        <div className="relative w-3.5 h-3.5 overflow-hidden flex items-center justify-center">
          <motion.div
            className="absolute flex items-center justify-center"
            variants={{
              rest: { x: 0, y: 0, opacity: 1 },
              hover: { x: 16, y: -16, opacity: 0 }
            }}
          >
            <ArrowRight className="w-3.5 h-3.5 text-white" />
          </motion.div>
        </div>
      </div>
    </motion.a>
  );
}

ContainersREACT / TSX

Frosted Glass Panel

Frosted glass container with HSL tailored backgrounds, deep backdrop-blur, and refracting micro-border gradients.

<div className="premium-card p-8 rounded-sm">
  <h3 className="text-xl font-extralight text-[#111111] mb-2">
    FROSTED GLASS PANEL
  </h3>
  <p className="font-mono text-xs text-[#595959] leading-[1.8]">
    A multi-layer background container creating premium physical material depth.
  </p>
</div>

ContainersREACT / TSX

Obsidian Dark Panel

Deep obsidian-toned frosted glass panel ideal for dark sections, structural focus highlights, and editorial call-to-actions.

<div className="premium-glass-dark p-8 rounded-sm relative">
  <div className="absolute top-0 left-0 right-0 h-[3px] bg-[#EE3224]" />
  <h3 className="text-xl font-light text-white mb-2">
    OBSIDIAN PANEL
  </h3>
  <p className="font-mono text-xs text-white/50 leading-[1.8]">
    A luxury dark panel designed with an elegant top crimson brand strip.
  </p>
</div>

IndicatorsREACT / TSX

Technical Status Capsule

Monospaced capsule with micro-margins, transparent border, and responsive animated live pulsing status dot.

<div className="live-dot-capsule">
  <span className="live-dot-indicator" />
  <span>STUDIO COORDS // ACCEPTING PROJECTS</span>
</div>

SurfacesREACT / TSX

Grayscale Hover Image

A luxury editorial portfolio card showing clean, high-performance transitions from black-and-white to full color.

<div className="relative group overflow-hidden border border-[#111111]/8">
  <div className="overflow-hidden">
    <img 
      src="/selectedworkcard1.avif" 
      alt="Luxury Showcase"
      className="journal-card-img w-full object-cover aspect-[4/3] transition-all duration-[650ms]" 
    />
  </div>
</div>

TypographyREACT / TSX

Cinematic Text Shimmer

A premium linear gradient sweep passing smoothly across text surfaces for hero headings and luxury titles.

<h2 className="premium-text-shimmer text-4xl font-extralight tracking-tight">
  READY TO ELEVATE?
</h2>

ButtonsREACT / TSX

Brutalist Slide Button

Zero-radius architectural button with solid dark outlines and a smooth crimson slide-fill background transition on hover.

import { motion } from "framer-motion";

export default function BrutalistButton() {
  return (
    <motion.button
      whileTap={{ scale: 0.98 }}
      className="relative overflow-hidden px-8 py-4 border border-[#111111] bg-transparent text-[#111111] font-mono text-[10.5px] uppercase tracking-[0.18em] cursor-pointer outline-none group rounded-xs"
    >
      {/* Slide backdrop */}
      <span className="absolute inset-0 bg-[#EE3224] origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-400 ease-out z-0" />
      
      {/* Button Label */}
      <span className="relative z-10 transition-colors duration-300 group-hover:text-white">
        EXPLORE SYSTEM
      </span>
    </motion.button>
  );
}

ButtonsREACT / TSX

Editorial Underline Link

Minimalist text link featuring an elegant horizontal scarlet line that slides smoothly from left to right on hover.

import { motion } from "framer-motion";
import { ArrowUpRight } from "lucide-react";

export default function EditorialLink() {
  return (
    <a href="#" className="relative inline-flex items-center gap-2 group py-1 select-none cursor-pointer">
      {/* Text Label */}
      <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-[#111111]/75 group-hover:text-[#111111] transition-colors duration-300">
        VIEW PORTFOLIO
      </span>
      
      {/* Rotating micro-arrow */}
      <ArrowUpRight className="w-3.5 h-3.5 text-[#111111]/40 group-hover:text-[#EE3224] group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300" />
      
      {/* Refract line */}
      <span className="absolute bottom-0 left-0 right-0 h-px bg-[#EE3224] origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-[350ms] ease-out" />
    </a>
  );
}

ButtonsREACT / TSX

Glass Refractive Button

Frosted glassmorphic button designed for dark overlays, offering a translucent background and deep backdrop blur.

import { motion } from "framer-motion";

export default function GlassButton() {
  return (
    <motion.button
      whileTap={{ scale: 0.98 }}
      className="relative overflow-hidden px-8 py-4 border border-white/20 bg-white/10 text-white backdrop-blur-md font-mono text-[10.5px] uppercase tracking-[0.18em] cursor-pointer hover:bg-white/20 hover:border-white/30 transition-all duration-300 outline-none rounded-sm shadow-sm"
    >
      <span>ENTER LAB</span>
    </motion.button>
  );
}

ButtonsREACT / TSX

Frosted Refractor Secondary Button

Tactile warm off-white frosted glass button containing double-layered hairline outlines, coordinate spotlight glare, and staggered character sliding transitions.

import { useRef } from "react";
import { motion, useMotionValue, useSpring } from "framer-motion";
import { ArrowRight } from "lucide-react";

export default function SecondaryButton() {
  const btnRef = useRef<HTMLButtonElement>(null);
  const btnX = useMotionValue(0);
  const btnY = useMotionValue(0);
  const springX = useSpring(btnX, { damping: 20, stiffness: 220, mass: 0.6 });
  const springY = useSpring(btnY, { damping: 20, stiffness: 220, mass: 0.6 });

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!btnRef.current) return;
    const rect = btnRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    btnX.set(x * 0.4);
    btnY.set(y * 0.4);

    const mouseX = ((e.clientX - rect.left) / rect.width) * 100;
    const mouseY = ((e.clientY - rect.top) / rect.height) * 100;
    btnRef.current.style.setProperty("--mouse-x", `${mouseX}%`);
    btnRef.current.style.setProperty("--mouse-y", `${mouseY}%`);
  };

  const handleMouseLeave = () => {
    btnX.set(0);
    btnY.set(0);
  };

  return (
    <motion.button
      ref={btnRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      whileTap={{ scale: 0.97 }}
      className="group relative cursor-pointer premium-btn-secondary outline-none border-none z-10"
      style={{ x: springX, y: springY }}
    >
      <div className="premium-btn-secondary-content">
        {/* Sliding characters */}
        <span className="letter-slide-container">
          {"EXPLORE WORK".split("").map((char, index) => (
            <span
              key={index}
              className="letter-slide-char"
              style={{ "--delay": `${index * 0.02}s` } as React.CSSProperties}
            >
              <span className="letter-slide-char-top-secondary">
                {char === " " ? "\u00A0" : char}
              </span>
              <span className="letter-slide-char-bottom-secondary">
                {char === " " ? "\u00A0" : char}
              </span>
            </span>
          ))}
        </span>
        <ArrowRight className="w-3.5 h-3.5 text-[#111111]/45 group-hover:text-[#EE3224] transition-colors duration-300" />
      </div>
      
      {/* Gliding bottom underline */}
      <span className="premium-btn-secondary-line" />
      
      {/* Spotlight glare sheen */}
      <div
        className="absolute inset-0 z-[3] opacity-0 group-hover:opacity-100 pointer-events-none mix-blend-overlay transition-opacity duration-300"
        style={{
          background: "radial-gradient(circle 80px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.7) 0%, transparent 100%)"
        }}
      />
    </motion.button>
  );
}

ContainersREACT / TSX

Frosted Glass Navigation Dock

Centred, floating capsule employing the premium off-white glassmorphic dock system. Includes shared spring-physics sliding active backgrounds.

import { useState } from "react";
import { motion } from "framer-motion";

const demoLinks = ["SERVICES", "WORK", "PROCESS", "ABOUT", "JOURNAL"];

export default function GlassNavDock() {
  const [activeTab, setActiveTab] = useState("SERVICES");
  const [hoveredTab, setHoveredTab] = useState<string | null>(null);

  return (
    <nav 
      className="flex items-center gap-1.5 glass-nav-dock p-1.5 rounded-none relative"
      onMouseLeave={() => setHoveredTab(null)}
    >
      {demoLinks.map((tab) => {
        const isActive = activeTab === tab;
        const isHovered = hoveredTab === tab;

        return (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            onMouseEnter={() => setHoveredTab(tab)}
            className="relative px-4 py-1.5 rounded-none text-[10px] font-mono tracking-widest cursor-pointer group transition-colors duration-300 outline-none border-none"
          >
            {/* Sliding backdrop material */}
            {(isHovered || (isActive && !hoveredTab)) && (
              <motion.span
                layoutId="demoNavActiveBg"
                className="absolute inset-0 glass-nav-item-active rounded-none -z-10"
                transition={{ type: "spring", stiffness: 350, damping: 30 }}
              />
            )}

            {/* Active micro crimson dot & label */}
            <span
              className={`flex items-center justify-center gap-1.5 relative z-10 ${
                isActive ? "text-[#111111] font-semibold" : "text-[#111111]/70"
              }`}
            >
              {isActive && (
                <span className="w-1.5 h-1.5 rounded-none bg-[#EE3224] flex-shrink-0" />
              )}
              {tab}
            </span>
          </button>
        );
      })}
    </nav>
  );
}