Darkforge | Damascus Steel Legacy tailwind.config = { theme: { extend: { colors: { forge: { base: '#0f172a', // Slate 900/950 mix dark: '#020617', steel: '#94a3b8', ember: '#d97706', // Amber 600 glow: '#fbbf24', // Amber 400 surface: '#1e293b', } }, fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Montserrat', 'sans-serif'], }, backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', } } } } / Custom Grain Overlay / .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } / Hide Scrollbar but keep functionality / body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background: #020617; } body::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } / Typography Utilities / .text-outline { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); color: transparent; } .clip-image { clip-path: inset(0 0 0 0); } / Smooth Scroll Behavior / html { scroll-behavior: smooth; } / Custom Selection / ::selection { background: #d97706; color: #000; }
Forge Fire

Master Blacksmithing

DAMASCUS
LEGACY

Steel is not merely metal. It is memory, folded a thousand times in fire and blood.

The Artisan

A solitary journey into the heart of the forge, where ancient techniques meet modern precision.

The Material

Sourcing the highest carbon steels, layering nickel and iron to create patterns that mimic flowing water.

The Promise

Every blade is a singular entity. No two patterns are alike. A lifetime guarantee on craftsmanship.

The Process

Heating
I

The Crucible

Raw steel is heated to 2,300°F. The metal glows with the color of the setting sun, becoming malleable, ready to accept the will of the smith.

Hammering
II

The Fold

Hammer and anvil. The steel is drawn out, folded, and welded. This is repeated until hundreds of layers exist within a single bar.

Grinding
III

The Reveal

After grinding the blade to shape, it is dipped in ferric chloride. The acid eats away the layers at different rates, unveiling the hidden Damascus pattern.

Forged in Fire.

Ready for your hand.

Commission a Masterpiece

The forge is currently accepting orders for Q4 2024.

gsap.registerPlugin(ScrollTrigger); // Hero Animations const tl = gsap.timeline(); tl.to(".hero-subtitle", { opacity: 1, y: 0, duration: 1, ease: "power3.out", delay: 0.5 }) .to(".hero-title", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, "-=0.5") .to(".hero-line", { height: "100px", duration: 1, ease: "power2.inOut" }, "-=0.8"); // Parallax Hero Background gsap.to(".hero-bg", { scrollTrigger: { trigger: "header", start: "top top", end: "bottom top", scrub: true }, yPercent: 30, scale: 1.2 }); // Text Reveal in Ethos Section const revealLines = document.querySelectorAll(".reveal-text span span"); gsap.to(revealLines, { scrollTrigger: { trigger: "#ethos", start: "top 70%", end: "bottom 80%", toggleActions: "play none none reverse" }, y: 0, stagger: 0.1, duration: 1, ease: "power4.out" }); // Fade in Ethos Details gsap.to(".fade-in-up", { scrollTrigger: { trigger: "#ethos", start: "top 50%", }, opacity: 1, y: 0, duration: 1, delay: 0.5 }); // Gallery Parallax & Reveal const galleryItems = document.querySelectorAll(".gallery-item"); galleryItems.forEach((item, i) => { gsap.from(item, { scrollTrigger: { trigger: item, start: "top 85%", }, y: 100, opacity: 0, duration: 1.2, ease: "power3.out" }); }); // Horizontal Scroll Process Section let sections = gsap.utils.toArray(".process-container > div"); gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: "#process", pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + document.querySelector("#process").offsetWidth } }); // Cursor Effect (Optional subtle follow) // Keeping it simple for performance, but adding hover states via CSS