Danci Shen - Tech Art

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>Danci Shen - Tech Art &#124; Virtual Production</title>
	<link>https://omolism.cargo.site</link>
	<description>Danci Shen - Tech Art &#124; Virtual Production</description>
	<pubDate>Wed, 07 Jan 2026 03:49:46 +0000</pubDate>
	<generator>https://omolism.cargo.site</generator>
	<language>en</language>
	
		
	<item>
		<title>Works</title>
				
		<link>https://omolism.cargo.site/Works</link>

		<pubDate>Wed, 07 Jan 2026 03:49:46 +0000</pubDate>

		<dc:creator>Danci Shen - Tech Art &#124; Virtual Production</dc:creator>

		<guid isPermaLink="true">https://omolism.cargo.site/Works</guid>

		<description>
@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&#38;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&#38;display=swap');
/* ============================================================
   WORKS — Danci Shen
   Studio-clean index. Rest state: media + title + year + tags.
   Description is revealed on hover (over the image). Brighter
   text for readability. Mobile-first: real single column,
   scrollable filters, lazy video.
   ============================================================ */
.works {
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.20);
    --muted: rgba(255, 255, 255, 0.72);
    --faint: rgba(255, 255, 255, 0.50);
    --glow: rgba(150, 170, 255, 0.14); /* set alpha 0 for pure monochrome */
    --sans: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-family: var(--sans);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.works * { box-sizing: border-box; }

/* ---- reveal ---- */
.works .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
.works .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .works .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .work-card, .work-media img, .work-arrow, .work-title, .work-hover { transition: none !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.works-header { margin-bottom: 2.6rem; }
.works-header h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}
.works-subtitle {
    font-size: 1rem;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

/* ============================================================
   FILTER BAR  — pill chips (sentence case)
   ============================================================ */
.works-filters {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.works-filter {
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--muted);
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.5rem 1.05rem;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.works-filter:focus { outline: none; }
.works-filter:hover { color: #fff; border-color: var(--line-strong); }
.works-filter.active { color: #0a0a0b; background: #fff; border-color: #fff; }
.works-reel {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    white-space: nowrap;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.works-reel svg { width: 12px; height: 12px; display: block; transition: transform 0.3s ease; }
.works-reel:hover { color: #fff; border-color: #fff; }
.works-reel:hover svg { transform: translate(2px, -2px); }

/* ============================================================
   GRID — 2-col case studies
   ============================================================ */
.works-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.4rem 3rem;
}
.work-card {
    text-decoration: none;
    color: #fff;
    display: block;
    min-width: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover { transform: translateY(-6px); }

/* media */
.work-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.9);
    margin-bottom: 1.1rem;
    transition: box-shadow 0.5s ease;
}
.work-card:hover .work-media {
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.95), 0 0 46px -12px var(--glow);
}
/* no fill behind media — if an image fails to load, nothing shows */
.work-ph { display: none; }
.work-media img,
.work-media iframe,
.work-media .image-gallery,
.work-media video {
    position: absolute !important;
    inset: -1px;                          /* overflow the rounded clip by 1px */
    width: calc(100% + 2px) !important;   /* kills the sub-pixel edge seam */
    height: calc(100% + 2px) !important;
    object-fit: cover;
    display: block;
    border: 0;
    margin: 0;
    z-index: 1;
    filter: brightness(0.94);
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.work-media .image-gallery img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }
.work-card:hover .work-media img,
.work-card:hover .work-media video { transform: scale(1.05); filter: brightness(1.0); }
.work-media figcaption, .work-media .image-caption { display: none !important; }
/* darken on hover so the revealed copy stays legible */
.work-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.72) 100%);
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.work-card:hover .work-media::after { opacity: 1; }
/* description — hidden at rest, fades up over the image on hover */
.work-hover {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 1.3rem 1.35rem;
    font-size: 0.97rem;
    font-weight: 400;
    line-height: 1.55;
    color: #fff;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.work-card:hover .work-hover { opacity: 1; transform: none; }
/* arrow badge — only on linked cards */
.work-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(10, 10, 12, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-6px) scale(0.85);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.work-arrow svg { width: 15px; height: 15px; display: block; }
.work-card:hover .work-arrow { opacity: 1; transform: none; }

/* content (rest state) — tight */
.work-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
}
.work-title {
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #fff;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover .work-title { transform: translateX(4px); }
.work-year {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--faint);
    white-space: nowrap;
    flex-shrink: 0;
}
.work-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.work-tag {
    font-size: 0.76rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.32rem 0.78rem;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.work-card:hover .work-tag { border-color: var(--line-strong); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .works-grid { gap: 3rem 2.2rem; }
}
@media (max-width: 768px) {
    /* the key fix: real single column on phones */
    .works-grid { grid-template-columns: 1fr; gap: 2.6rem; }
    .works-header h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
    .works-subtitle { font-size: 1.05rem; }
    .work-title { font-size: 1.35rem; }
    .work-arrow { display: none; }
    /* no hover on phones — keep the rest state clean, copy lives on the detail page */
    .work-hover { display: none; }
    .work-media::after { display: none; }
    /* filters become a horizontal scroll strip (no awkward wrapping) */
    .works-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        margin: 0 -1.2rem 2.2rem;
        padding: 0 1.2rem 1.2rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .works-filters::-webkit-scrollbar { display: none; }
    .works-reel { margin-left: 0.4rem; }
}


        Works.
        Building immersive worlds for storytelling.
    

        All projects
        Real-time
        XR &#38;amp; Virtual Production
        Procedural &#38;amp; Tool Dev
        Look Dev
        AI
        Reel 
    

                &#60;img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/194f9e4ea27c73b9f26fa70fd8c5cb8dfd8a8bdc79820f5745a3a869a44dc065/danciedit0215backup_1_v1_2.gif" data-mid="245441975" border="0"  src="https://freight.cargo.site/w/800/i/194f9e4ea27c73b9f26fa70fd8c5cb8dfd8a8bdc79820f5745a3a869a44dc065/danciedit0215backup_1_v1_2.gif" /&#62;
                Virtual production lead on an LED volume shoot with Harbor Picture Company and Electric Theatre Collective.
                
            
            Gentle Monster XR2026
            Virtual ProductionLook DevelopmentOn-set Optimization
        

                A real-time WebGL Gaussian Splatting viewer with scene interaction and SPZ mobile optimization.
            
            SplatGarden &#124; WebGL 3DGS2026
            Gaussian SplattingWebGLReal-time
        

                Reads lighting and materials from one photograph, then exports a UsdLux rig with OpenPBR textures.
                
            
            OpenProbe &#124; Light &#38;amp; Material2026
            Inverse RenderingOpenPBR / USDOn-device AI
        

                &#60;img width="3079" height="1732" width_o="3079" height_o="1732" data-src="https://freight.cargo.site/t/original/i/177b6d66e13b2b5905f854f31a3e485374824095091ef4b193577e923f0036c1/ScreenShot00038.png" data-mid="245556738" border="0"  src="https://freight.cargo.site/w/1000/i/177b6d66e13b2b5905f854f31a3e485374824095091ef4b193577e923f0036c1/ScreenShot00038.png" /&#62;
                A 48-hour pipeline turning AI images into real-time voxel worlds via Gaussian Splatting, USD tooling, and Unreal Engine 5.
                
            
            AI Voxel &#124; NVIDIA AI Summit2026
            AI PipelineUSD ToolingPython
        

                &#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/b7a02d7275c29f210911a86406e9638b5965ec45d7d7582ea4c2c21ff8105841/image-38.png" data-mid="247301700" border="0"  src="https://freight.cargo.site/w/1000/i/b7a02d7275c29f210911a86406e9638b5965ec45d7d7582ea4c2c21ff8105841/image-38.png" /&#62;
                Tech art lead on an LED volume XR shoot: pipeline, look dev, and on-set optimization.
                
            
            KohlerLED2025
            VP PipelineLED VolumeLook Development
        

                Tech lead on a real-time virtual production shoot: lighting, color grading, on-set optimization.
                
            
            Lotos Station2025
            VP PipelineLightingColor Grading
        

                &#60;img width="900" height="506" width_o="900" height_o="506" data-src="https://freight.cargo.site/t/original/i/eb135e44ec8225dd85146ea9d6a7d27d96e88fb73295a391582d0f5f496c7212/KineticAnimation_2.gif" data-mid="242534774" border="0"  src="https://freight.cargo.site/w/900/i/eb135e44ec8225dd85146ea9d6a7d27d96e88fb73295a391582d0f5f496c7212/KineticAnimation_2.gif" /&#62;
                A procedural mechanical animation driven by tangent math in Houdini VEX, with no keyframing.
                
            
            Kinetic Animation2025
            Houdini VEXProcedural RiggingProcedural Animation
        

                &#60;img width="1067" height="600" width_o="1067" height_o="600" data-src="https://freight.cargo.site/t/original/i/58b679479aef88c2175ca0392b9544ff67eccaed1d22d9b64388cf7811afab33/HUD---Symbiosis-From-Nature-and-Technoogy-Online-Video-9_1.gif" data-mid="242534778" border="0"  src="https://freight.cargo.site/w/1000/i/58b679479aef88c2175ca0392b9544ff67eccaed1d22d9b64388cf7811afab33/HUD---Symbiosis-From-Nature-and-Technoogy-Online-Video-9_1.gif" /&#62;
                Houdini-to-Unreal close-up simulation and look development for a collaborative short film.
            
            HUG2024
            SimulationPipeline IntegrationVisual Effects
        

                A one-click pipeline tool that renames, standardizes, and rebuilds asset hierarchies from Blender into Unity.
                
            
            Blender to Unity Addon2025
            Pipeline AutomationPythonC# Editor Tool
        

                An interactive WebGL portfolio built with Three.js, GSAP, and custom GLSL shaders.
                
            
            D:ualSpace2026
            Web DesignWebGL / Three.jsVibecoding
        

                Shaders and procedural AR VFX in Reality Composer Pro for a shipped, mobile-optimized iOS app.
                
            
            Aako App2025
            AR ApplicationShader DevelopmentMobile Optimization
        

                A cinematic UE5 environment with hero asset texturing and Niagara atmospheric effects.
                
            
            Solaris Gate2024
            Environment ArtMaterial SystemNiagara FX
        

                &#60;img width="1067" height="600" width_o="1067" height_o="600" data-src="https://freight.cargo.site/t/original/i/c915a614a5718d8614eb80c5594ca8734f702fb3cafc958babcfcdb7eb68c1c2/aurorawispers_v1_2.gif" data-mid="242534782" border="0"  src="https://freight.cargo.site/w/1000/i/c915a614a5718d8614eb80c5594ca8734f702fb3cafc958babcfcdb7eb68c1c2/aurorawispers_v1_2.gif" /&#62;
                Real-time Niagara FX with a Blueprint-driven skybox exposing global controls for color, density, and movement.
                
            
            Aurora2025
            Niagara FXBlueprint SystemParticle Systems
        

                &#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/80cdfbd2abf20e8b28bb8371ef12357fcd311220f761ea51f0c3cdfb84e23e8f/Group-2.png" data-mid="242534759" border="0"  src="https://freight.cargo.site/w/1000/i/80cdfbd2abf20e8b28bb8371ef12357fcd311220f761ea51f0c3cdfb84e23e8f/Group-2.png" /&#62;
                A material study across the Substance-to-Unreal pipeline on hero assets modelled and textured from scratch.
                
            
            The Last Dinner At Courtyard2025
            Material PipelineHero AssetEnvironment Art
        

                &#60;img width="1066" height="600" width_o="1066" height_o="600" data-src="https://freight.cargo.site/t/original/i/7e81bf62f057b0e2f6baf8d6535a82c2ea337592ef73c698dc97a65e2ca4956e/escapethegallery_v1_1_1.gif" data-mid="242534780" border="0"  src="https://freight.cargo.site/w/1000/i/7e81bf62f057b0e2f6baf8d6535a82c2ea337592ef73c698dc97a65e2ca4956e/escapethegallery_v1_1_1.gif" /&#62;
                A first-person escape game in Unreal, from modelling to Blueprint gameplay and UI.
            
            Escape the Gallery2025
            Unreal BlueprintGame UILevel Design
        

                &#60;img width="1249" height="703" width_o="1249" height_o="703" data-src="https://freight.cargo.site/t/original/i/3c1f914e1f6c3292a5be7fd4806ed1a0691849aa9befc377530eb8a54d12d884/we-oasis.png" data-mid="242534761" border="0"  src="https://freight.cargo.site/w/1000/i/3c1f914e1f6c3292a5be7fd4806ed1a0691849aa9befc377530eb8a54d12d884/we-oasis.png" /&#62;
                StyleGAN2 trained on 500+ photographs, used as a generative texture medium across 3D renders.
                
            
            We(Oasis)2021
            StyleGAN2Generative AIArt Direction
        

                &#60;img width="1200" height="675" width_o="1200" height_o="675" data-src="https://freight.cargo.site/t/original/i/0149a515b9fe016ea24e4093407f6ab1bbd04ac0a97b6859393840dd344bd0ee/S25_V721_P1_ShenDanci_ScaffoldedHavanaBuilding_Final_1.gif" data-mid="244733400" border="0"  src="https://freight.cargo.site/w/1000/i/0149a515b9fe016ea24e4093407f6ab1bbd04ac0a97b6859393840dd344bd0ee/S25_V721_P1_ShenDanci_ScaffoldedHavanaBuilding_Final_1.gif" /&#62;
                A parametric Houdini building exposing 20+ controls for rapid environment iteration without remodeling.
                
            
            Procedural Havana Building2025
            HDAProcedural ModelingTool Development
        

                &#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/223a9fb34c1a201b6b5fac069ad500938bc1721159b4439294c13c617fdf6d0a/wearable4.png" data-mid="242534765" border="0"  src="https://freight.cargo.site/w/1000/i/223a9fb34c1a201b6b5fac069ad500938bc1721159b4439294c13c617fdf6d0a/wearable4.png" /&#62;
                A look development and cinematic camera study in Blender, focused on lighting and expressive motion.
            
            Laika's Journey2023
            Look DevelopmentCinematic CameraStorytelling
        

                &#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/56cbeb78282e61826ab46dd74dc770aea850c3ce70da5b2d45484ff213a5034c/-winter_mantis_2.png" data-mid="242534730" border="0"  src="https://freight.cargo.site/w/1000/i/56cbeb78282e61826ab46dd74dc770aea850c3ce70da5b2d45484ff213a5034c/-winter_mantis_2.png" /&#62;
                A ZBrush-to-Substance creature study focused on surface detail, material definition, and PBR output.
            
            Digital Creature2022
            Creature ArtTexturingPBR Workflow
        

(function () {
    var root = document.querySelector('.works');
    if (!root) return;
    var reduce = window.matchMedia &#38;&#38; window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var cards = Array.prototype.slice.call(root.querySelectorAll('.work-card'));

    /* column-aware stagger on first load */
    cards.forEach(function (c, i) {
        if (!c.style.transitionDelay) c.style.transitionDelay = ((i % 2) * 90) + 'ms';
    });

    var reveals = Array.prototype.slice.call(root.querySelectorAll('.reveal'));
    var vids = Array.prototype.slice.call(root.querySelectorAll('iframe.work-vid[data-src]'));

    if (!('IntersectionObserver' in window) &#124;&#124; reduce) {
        reveals.forEach(function (el) { el.classList.add('is-visible'); });
        vids.forEach(function (f) { f.src = f.getAttribute('data-src'); });
    } else {
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                if (e.isIntersecting) { e.target.classList.add('is-visible'); io.unobserve(e.target); }
            });
        }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
        reveals.forEach(function (el) { io.observe(el); });

        /* lazy-load + play videos only near the viewport (mobile-friendly) */
        var vio = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                var f = e.target;
                if (e.isIntersecting &#38;&#38; !f.src &#38;&#38; f.getAttribute('data-src')) {
                    f.src = f.getAttribute('data-src');
                }
            });
        }, { threshold: 0.1, rootMargin: '300px 0px 300px 0px' });
        vids.forEach(function (f) { vio.observe(f); });
    }

    /* filtering — hide non-matching, then re-animate the matches in */
    var filters = Array.prototype.slice.call(root.querySelectorAll('.works-filter'));
    filters.forEach(function (btn) {
        btn.addEventListener('click', function () {
            var f = btn.getAttribute('data-filter');
            filters.forEach(function (x) { x.classList.remove('active'); });
            btn.classList.add('active');

            var shown = [];
            cards.forEach(function (card) {
                var cats = (card.getAttribute('data-categories') &#124;&#124; '').split(',');
                if (f === 'all' &#124;&#124; cats.indexOf(f) !== -1) { card.style.display = ''; shown.push(card); }
                else { card.style.display = 'none'; }
            });
            if (reduce) return;
            shown.forEach(function (c, i) {
                c.classList.remove('is-visible');
                c.style.transitionDelay = ((i % 2) * 70) + 'ms';
            });
            requestAnimationFrame(function () {
                requestAnimationFrame(function () {
                    shown.forEach(function (c) { c.classList.add('is-visible'); });
                });
            });
        });
    });
})();
</description>
		
	</item>
		
	</channel>
</rss>