{"id":386,"date":"2025-12-23T01:05:05","date_gmt":"2025-12-22T23:05:05","guid":{"rendered":"https:\/\/inhsindesign.de\/wordpress\/?page_id=386"},"modified":"2025-12-23T01:09:48","modified_gmt":"2025-12-22T23:09:48","slug":"386-2","status":"publish","type":"page","link":"https:\/\/inhsindesign.de\/wordpress\/386-2\/","title":{"rendered":"Spatial Memory Digital Preservation"},"content":{"rendered":"\n<!-- \n    WORDPRESS INTEGRATION INSTRUCTIONS (UPDATED FIX):\n    1. Paste this into a \"Custom HTML\" block.\n    2. This code now includes a \"Fullscreen Overlay\" fix. \n       It will automatically cover up the theme's default header\/footer \n       and expand to the full width of the screen.\n-->\n\n<!-- 1. DEPENDENCIES (Fonts & Tailwind) -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@100;300;400;500;700&#038;family=Space+Grotesk:wght@300;400;600&#038;display=swap\" rel=\"stylesheet\">\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/inter-ui\/3.19.3\/inter.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- 2. CUSTOM STYLES -->\n<style>\n    \/* FIX: FULLSCREEN OVERLAY \n       This forces the wrapper to float above the theme's layout \n    *\/\n    .inhsin-custom-wrapper {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        height: 100vh;\n        z-index: 9990; \/* High enough to cover theme, lower than Admin Bar *\/\n        background-color: #ffffff;\n        overflow-y: auto; \/* Allows scrolling INSIDE our wrapper *\/\n        overflow-x: hidden;\n        \n        font-family: 'Space Grotesk', 'Inter', sans-serif;\n        color: #1a1a1a;\n        -webkit-font-smoothing: antialiased;\n        display: flex;\n        flex-direction: column;\n    }\n    \n    .font-chinese {\n        font-family: 'Noto Sans SC', sans-serif;\n    }\n\n    \/* Minimalist Scrollbar *\/\n    .inhsin-custom-wrapper ::-webkit-scrollbar {\n        width: 6px;\n    }\n    .inhsin-custom-wrapper ::-webkit-scrollbar-track {\n        background: #ffffff; \n    }\n    .inhsin-custom-wrapper ::-webkit-scrollbar-thumb {\n        background: #e5e5e5; \n    }\n    .inhsin-custom-wrapper ::-webkit-scrollbar-thumb:hover {\n        background: #a3a3a3; \n    }\n\n    \/* Loader Animation *\/\n    .loader-line {\n        width: 0%;\n        height: 2px;\n        background-color: #000;\n        animation: load 1.5s ease-in-out forwards;\n    }\n\n    @keyframes load {\n        0% { width: 0%; }\n        100% { width: 100px; }\n    }\n    \n    \/* FIX: WORDPRESS ADMIN BAR COMPATIBILITY\n       If you are logged in, we push the design down so you can still use the admin bar.\n    *\/\n    body.admin-bar .inhsin-custom-wrapper {\n        top: 32px !important;\n        height: calc(100vh - 32px) !important;\n    }\n    @media screen and (max-width: 782px) {\n        body.admin-bar .inhsin-custom-wrapper {\n            top: 46px !important;\n            height: calc(100vh - 46px) !important;\n        }\n    }\n<\/style>\n\n<!-- 3. MAIN CONTENT WRAPPER -->\n<div class=\"inhsin-custom-wrapper\">\n\n    <!-- Navigation -->\n    <nav class=\"fixed top-0 w-full z-50 bg-white\/90 backdrop-blur-sm border-b border-gray-100 transition-all duration-300 absolute\" id=\"inhsin-navbar\">\n        <div class=\"max-w-[1400px] mx-auto px-6 md:px-12 h-20 flex items-center justify-between\">\n            <!-- Logo Section -->\n            <a href=\"#\" class=\"flex items-center gap-3 hover:opacity-80 transition-opacity group no-underline text-current\">\n                <!-- SVG Logo -->\n                <div class=\"relative w-10 h-10 bg-[#FAFAFA]\" style=\"clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\">\n                    <svg width=\"40\" height=\"40\" viewBox=\"0 0 100 100\" class=\"transition-transform duration-700 ease-out group-hover:rotate-180 block\">\n                        <path d=\"M50 10 L50 50\" stroke=\"#1a1a1a\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                        <path d=\"M85 30 L50 50\" stroke=\"#1a1a1a\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                        <path d=\"M85 70 L50 50\" stroke=\"#1a1a1a\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                        <path d=\"M15 70 L50 50\" stroke=\"#1a1a1a\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                        <path d=\"M15 30 L50 50\" stroke=\"#1a1a1a\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                        <path d=\"M15 30 L50 10 L85 30 L85 70 L50 90 L15 70 Z\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                        <line x1=\"8\" y1=\"30\" x2=\"8\" y2=\"70\" stroke=\"#1a1a1a\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                        <line x1=\"92\" y1=\"30\" x2=\"92\" y2=\"70\" stroke=\"#1a1a1a\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                    <\/svg>\n                <\/div>\n                <!-- Text -->\n                <span class=\"font-chinese font-light text-xl tracking-widest text-[#1a1a1a]\">\n                    \u56e0\u5fc3\u9020\u5883\n                <\/span>\n            <\/a>\n\n            <!-- Desktop Menu -->\n            <div class=\"hidden md:flex space-x-12 text-xs font-medium tracking-widest uppercase text-[#1a1a1a]\">\n                <a href=\"#work\" class=\"hover:text-gray-500 transition-colors no-underline\">Work<\/a>\n                <a href=\"#about\" class=\"hover:text-gray-500 transition-colors no-underline\">Profile<\/a>\n                <a href=\"#contact\" class=\"hover:text-gray-500 transition-colors no-underline\">Contact<\/a>\n            <\/div>\n\n            <!-- Mobile Menu Button -->\n            <button class=\"md:hidden p-2 text-[#1a1a1a]\" onclick=\"document.getElementById('mobile-menu').classList.toggle('hidden')\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"square\" stroke-linejoin=\"miter\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\" \/>\n                <\/svg>\n            <\/button>\n        <\/div>\n        \n        <!-- Mobile Menu Overlay -->\n        <div id=\"mobile-menu\" class=\"hidden absolute top-20 left-0 w-full bg-white border-b border-gray-100 p-6 md:hidden\">\n            <div class=\"flex flex-col space-y-4 text-sm font-medium tracking-widest uppercase text-[#1a1a1a]\">\n                <a href=\"#work\" class=\"block hover:text-gray-500 no-underline\">Work<\/a>\n                <a href=\"#about\" class=\"block hover:text-gray-500 no-underline\">Profile<\/a>\n                <a href=\"#contact\" class=\"block hover:text-gray-500 no-underline\">Contact<\/a>\n            <\/div>\n        <\/div>\n    <\/nav>\n\n    <!-- Main Content -->\n    <main class=\"flex-grow pt-32 pb-20 px-6 md:px-12 max-w-[1400px] mx-auto w-full\">\n        \n        <!-- Header \/ Intro -->\n        <header class=\"mb-16 md:mb-24 fade-in\">\n            <div class=\"loader-line mb-8\"><\/div>\n            <h1 class=\"text-4xl md:text-6xl font-light leading-tight tracking-tight mb-6 text-[#1a1a1a]\">\n                Spatial Memory <br>\n                <span class=\"font-bold\">Digital Preservation<\/span>\n            <\/h1>\n            <p class=\"text-gray-500 max-w-xl text-sm md:text-base leading-relaxed\">\n                Exploring the intersection of physical architecture and digital reconstruction. \n                A study in light, form, and volume using neural radiance fields.\n            <\/p>\n        <\/header>\n\n        <!-- Featured Project (The Embed) -->\n        <section id=\"work\" class=\"w-full mb-32\">\n            <!-- Wrapper for Aspect Ratio & Responsiveness -->\n            <div class=\"relative w-full bg-gray-50 overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-500 group\" style=\"padding-bottom: 56.25%;\">\n                <!-- The Luma Embed -->\n                <iframe \n                    src=\"https:\/\/lumalabs.ai\/embed\/8d23ba2b-bd82-470d-8441-12e2559ea9c7?mode=video&#038;background=%23ffffff&#038;color=%23000000&#038;showTitle=true&#038;loadBg=true&#038;logoPosition=bottom-left&#038;infoPosition=bottom-right&#038;cinematicVideo=undefined&#038;showMenu=false\" \n                    class=\"absolute top-0 left-0 w-full h-full border-none\"\n                    title=\"Luma Embed\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen>\n                <\/iframe>\n                \n                <!-- Overlay hint -->\n                <div class=\"absolute bottom-4 left-4 text-[10px] uppercase tracking-widest text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none\">\n                    Interactive 3D View\n                <\/div>\n            <\/div>\n\n            <!-- Project Metadata -->\n            <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8 mt-12 border-t border-gray-100 pt-8\">\n                <div class=\"col-span-1\">\n                    <h3 class=\"text-xs font-bold uppercase tracking-widest text-gray-400 mb-2\">Project<\/h3>\n                    <p class=\"text-sm font-medium\">Luma Capture 01<\/p>\n                <\/div>\n                <div class=\"col-span-1\">\n                    <h3 class=\"text-xs font-bold uppercase tracking-widest text-gray-400 mb-2\">Year<\/h3>\n                    <p class=\"text-sm font-medium\">2024<\/p>\n                <\/div>\n                <div class=\"col-span-1\">\n                    <h3 class=\"text-xs font-bold uppercase tracking-widest text-gray-400 mb-2\">Type<\/h3>\n                    <p class=\"text-sm font-medium\">3D Scanning \/ NeRF<\/p>\n                <\/div>\n                <div class=\"col-span-1 md:col-span-1\">\n                    <h3 class=\"text-xs font-bold uppercase tracking-widest text-gray-400 mb-2\">Description<\/h3>\n                    <p class=\"text-sm text-gray-600 leading-relaxed\">\n                        An immersive capture demonstrating high-fidelity texture and geometry reconstruction. \n                        Navigable 3D environment rendered in real-time.\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- More Works -->\n        <section class=\"mb-20\">\n            <div class=\"flex items-center justify-between mb-12\">\n                <h2 class=\"text-xl font-medium tracking-wide\">Selected Works<\/h2>\n                <a href=\"#\" class=\"text-xs font-bold uppercase tracking-widest border-b border-black pb-1 hover:text-gray-600 hover:border-gray-600 transition-all no-underline\">View Archive<\/a>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16\">\n                <!-- Item 1 -->\n                <article class=\"group cursor-pointer\">\n                    <div class=\"w-full aspect-[4\/3] bg-gray-100 mb-4 overflow-hidden relative\">\n                        <div class=\"absolute inset-0 flex items-center justify-center text-gray-300\">\n                           <svg class=\"w-12 h-12\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"square\" stroke-linejoin=\"miter\" stroke-width=\"1\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"><\/path><\/svg>\n                        <\/div>\n                        <div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500\"><\/div>\n                    <\/div>\n                    <h3 class=\"text-sm font-semibold mb-1 group-hover:underline decoration-1 underline-offset-4\">Urban Interface<\/h3>\n                    <p class=\"text-xs text-gray-500\">Interaction Design<\/p>\n                <\/article>\n\n                <!-- Item 2 -->\n                <article class=\"group cursor-pointer\">\n                    <div class=\"w-full aspect-[4\/3] bg-gray-100 mb-4 overflow-hidden relative\">\n                         <div class=\"absolute inset-0 flex items-center justify-center text-gray-300\">\n                            <svg class=\"w-12 h-12\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"square\" stroke-linejoin=\"miter\" stroke-width=\"1\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"><\/path><\/svg>\n                         <\/div>\n                        <div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500\"><\/div>\n                    <\/div>\n                    <h3 class=\"text-sm font-semibold mb-1 group-hover:underline decoration-1 underline-offset-4\">Structure 09<\/h3>\n                    <p class=\"text-xs text-gray-500\">Architecture<\/p>\n                <\/article>\n\n                <!-- Item 3 -->\n                <article class=\"group cursor-pointer\">\n                    <div class=\"w-full aspect-[4\/3] bg-gray-100 mb-4 overflow-hidden relative\">\n                         <div class=\"absolute inset-0 flex items-center justify-center text-gray-300\">\n                            <svg class=\"w-12 h-12\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"square\" stroke-linejoin=\"miter\" stroke-width=\"1\" d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"><\/path><path stroke-linecap=\"square\" stroke-linejoin=\"miter\" stroke-width=\"1\" d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n                         <\/div>\n                        <div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/5 transition-colors duration-500\"><\/div>\n                    <\/div>\n                    <h3 class=\"text-sm font-semibold mb-1 group-hover:underline decoration-1 underline-offset-4\">Motion Study<\/h3>\n                    <p class=\"text-xs text-gray-500\">Animation<\/p>\n                <\/article>\n            <\/div>\n        <\/section>\n\n    <\/main>\n\n    <!-- Footer -->\n    <footer class=\"relative z-10 bg-[#FAFAFA] text-[#1a1a1a] py-10 px-6 border-t border-gray-100\">\n        <div class=\"max-w-[1400px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6\">\n            <p class=\"text-gray-400 text-sm\">\n                Copyright \u00a9 2026 INHSIN DESIGN.\n            <\/p>\n            <div class=\"flex gap-8 text-sm text-gray-400 uppercase tracking-widest\">\n                <a href=\"https:\/\/www.inhsin.com\/legal.html\" class=\"hover:text-black transition-colors no-underline\">Imprint and Legal<\/a>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n<\/div>\n\n<!-- 4. SCRIPTS -->\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        \/\/ 1. Move the wrapper to body to escape theme containers\n        const wrapper = document.querySelector('.inhsin-custom-wrapper');\n        if (wrapper && document.body) {\n            document.body.appendChild(wrapper);\n        }\n\n        \/\/ 2. Navbar interaction\n        const nav = document.getElementById('inhsin-navbar');\n        \/\/ We listen to scroll inside the WRAPPER now, not the window\n        wrapper.addEventListener('scroll', () => {\n            if (wrapper.scrollTop > 50) {\n                nav.classList.add('shadow-sm');\n            } else {\n                nav.classList.remove('shadow-sm');\n            }\n        });\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u56e0\u5fc3\u9020\u5883 Work Profile Contact Work Profile Contact Spatial Memory Digital Preservation Exploring the intersection of physical architecture and digital reconstruction. A study in light, form, and volume using neural radiance fields. Interactive 3D View Project Luma Capture 01 Year 2024 Type 3D Scanning \/ NeRF Description An immersive capture demonstrating high-fidelity texture and geometry reconstruction. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-386","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/inhsindesign.de\/wordpress\/wp-json\/wp\/v2\/pages\/386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inhsindesign.de\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inhsindesign.de\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inhsindesign.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inhsindesign.de\/wordpress\/wp-json\/wp\/v2\/comments?post=386"}],"version-history":[{"count":3,"href":"https:\/\/inhsindesign.de\/wordpress\/wp-json\/wp\/v2\/pages\/386\/revisions"}],"predecessor-version":[{"id":389,"href":"https:\/\/inhsindesign.de\/wordpress\/wp-json\/wp\/v2\/pages\/386\/revisions\/389"}],"wp:attachment":[{"href":"https:\/\/inhsindesign.de\/wordpress\/wp-json\/wp\/v2\/media?parent=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}