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 a fashion-tech LED volume shoot with Harbor Picture Company and Electric Theatre Collective.
                
            
            Gentle Monster XR2026
            Virtual ProductionLook DevelopmentOn-set Optimization
        

                Technical director on a real-time WebGL Gaussian Splatting viewer, with scene interaction and SPZ-based mobile optimization.
            
            SplatGarden &#124; WebGL 3DGS2026
            Gaussian SplattingWebGLReal-time
        

                &#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
        

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

                &#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
        

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

                &#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, owning pipeline, look dev, and on-set optimization for broadcast delivery.
                
            
            KohlerLED2025
            VP PipelineLED VolumeLook Development
        

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

                &#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 fully procedural mechanical animation driven by tangent math in Houdini VEX, with no manual keyframing.
                
            
            Kinetic Animation2025
            Houdini VEXProcedural RiggingProcedural Animation
        

                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>