[{"data":1,"prerenderedAt":384},["ShallowReactive",2],{"page:en:parallax":3},[4],{"id":5,"title":6,"body":7,"description":373,"extension":376,"meta":377,"navigation":378,"path":379,"seo":380,"stem":382,"__hash__":383},"page\u002Fen\u002Fparallax.md","Parallax + Grid",{"type":8,"value":9,"toc":372},"minimark",[10,51,121,149,277,345],[11,12,16],"parallax-section",{"className":13,":hero":15},[14],"hero","true",[17,18,19],"grid-container",{},[20,21,23,32,37,44],"grid-cell",{"size":22},"10,4",[24,25,26],"p",{},[27,28,31],"span",{"className":29},[30],"eyebrow","Nuxt 4 base project",[33,34,36],"h1",{"id":35},"hybrid","Hybrid.",[24,38,39],{},[27,40,43],{"className":41},[42],"lead","Parallax meets Grid — one markdown file per locale, all the design in the page's stylesheet.",[24,45,46],{},[27,47,50],{"className":48},[49],"cue","Scroll",[11,52,56],{"className":53},[54,55],"section-intro","panel",[17,57,58,69,91,105],{},[20,59,63],{"size":60,"className":61},"12,4",[62],"panel-label",[24,64,65],{},[27,66,68],{"className":67},[30],"01 — Grid inside parallax",[20,70,74,79],{"size":71,"className":72},"6,4",[73],"panel-column",[75,76,78],"h2",{"id":77},"left-column","Left Column",[24,80,81,82,86,87,90],{},"This content lives inside a ",[83,84,85],"code",{},"GridCell"," with ",[83,88,89],{},"size=\"6,4\""," — 6 columns on desktop, 4 on mobile. The grid system handles responsive sizing automatically.",[20,92,94,98],{"size":71,"className":93},[73],[75,95,97],{"id":96},"right-column","Right Column",[24,99,100,101,104],{},"Both columns sit inside a ",[83,102,103],{},"GridContainer",", which is itself an MDC block. The gutter and centering come from the grid mixins — no custom CSS needed.",[20,106,109],{"size":60,"className":107},[108],"panel-footer",[24,110,111,116],{},[27,112,115],{"className":113},[114],"footer-note","Vertical section",[27,117,120],{"className":118},[119],"footer-meta","GridContainer + GridCell",[11,122,125],{"className":123},[124],"quote",[17,126,127],{},[20,128,130,136,142],{"size":22,"margin":129},"1,0",[24,131,132],{},[27,133,135],{"className":134},[30],"On authoring",[137,138,139],"blockquote",{},[24,140,141],{},"Grid layout and parallax effects in one file, authored entirely in markdown.",[24,143,144],{},[27,145,148],{"className":146},[147],"attribution","— This Markdown File",[150,151,152,205],"parallax-horizontal-scroll",{},[11,153,157],{"className":154,":wide":15,"depth":156},[155,55],"section-grid-2col","0.3",[17,158,159,168,182,192],{},[20,160,162],{"size":60,"className":161},[62],[24,163,164],{},[27,165,167],{"className":166},[30],"02 — Horizontal scroll",[20,169,171,175],{"size":71,"className":170},[73],[75,172,174],{"id":173},"two-column-panel","Two-Column Panel",[24,176,177,178,181],{},"This is a parallax section that scrolls horizontally — and its content respects the grid system. The ",[83,179,180],{},"wide"," prop removes the max-width constraint.",[20,183,185,189],{"size":71,"className":184},[73],[75,186,188],{"id":187},"grid-inside-parallax","Grid Inside Parallax",[24,190,191],{},"Each column aligns to the same grid as the rest of the page. Resize the window to see responsive behavior inside the horizontal scroll.",[20,193,195],{"size":60,"className":194},[108],[24,196,197,201],{},[27,198,200],{"className":199},[114],"Horizontal panel",[27,202,204],{"className":203},[119],"Slide 1 of 2",[11,206,210],{"className":207,":wide":15,"depth":209},[208,55],"section-grid-3col","0.4",[17,211,212,221,233,255,265],{},[20,213,215],{"size":60,"className":214},[62],[24,216,217],{},[27,218,220],{"className":219},[30],"03 — Three columns",[20,222,225,230],{"size":223,"className":224},"4,4",[73],[226,227,229],"h3",{"id":228},"card-1","Card 1",[24,231,232],{},"Three equal columns inside the second horizontal panel.",[20,234,236,240],{"size":223,"className":235},[73],[226,237,239],{"id":238},"card-2","Card 2",[24,241,242,243,247,248,247,252,254],{},"Markdown formatting works: ",[244,245,246],"strong",{},"bold",", ",[249,250,251],"em",{},"italic",[83,253,83],{},".",[20,256,258,262],{"size":223,"className":257},[73],[226,259,261],{"id":260},"card-3","Card 3",[24,263,264],{},"Grid + parallax + horizontal scroll — all from markdown.",[20,266,268],{"size":60,"className":267},[108],[24,269,270,273],{},[27,271,200],{"className":272},[114],[27,274,276],{"className":275},[119],"Slide 2 of 2",[150,278,281,303,324],{"background-src":279,"background-width":280},"\u002Fvideos\u002Fservices_desktop.mp4","200vw",[11,282,285],{"className":283,":wide":15,":instant":15},[284],"background-demo",[17,286,287],{},[20,288,290,296,300],{"size":289},"5,4",[24,291,292],{},[27,293,295],{"className":294},[30],"04 — Panoramic #background · 01 \u002F 03",[75,297,299],{"id":298},"the-background-pans","The background pans",[24,301,302],{},"Slide 1 — left column content sits on top of the panning background.",[11,304,306],{"className":305,":wide":15,":instant":15},[284],[17,307,308],{},[20,309,311,317,321],{"size":289,"margin":310},"7,0",[24,312,313],{},[27,314,316],{"className":315},[30],"04 — Panoramic #background · 02 \u002F 03",[75,318,320],{"id":319},"the-grid-still-holds","The grid still holds",[24,322,323],{},"Slide 2 — right column; the panorama keeps sliding under the text.",[11,325,327],{"className":326,":wide":15,":instant":15},[284],[17,328,329],{},[20,330,332,338,342],{"size":71,"margin":331},"3,0",[24,333,334],{},[27,335,337],{"className":336},[30],"04 — Panoramic #background · 03 \u002F 03",[75,339,341],{"id":340},"one-video-three-slides","One video, three slides",[24,343,344],{},"Slide 3 — centered block as the panorama reaches its right edge.",[11,346,350],{"className":347,":overlap":15,"id":349},[348],"section-finale","finale",[17,351,352],{},[20,353,356,362,366],{"size":354,"margin":355},"8,4","2,0",[24,357,358],{},[27,359,361],{"className":360},[30],"The end",[75,363,365],{"id":364},"thats-the-hybrid","That's the hybrid",[24,367,368],{},[27,369,371],{"className":370},[42],"Parallax sections with grid layouts, horizontal scrolling, and quotes — all authored in one markdown file per locale.",{"title":373,"searchDepth":374,"depth":374,"links":375},"",2,[],"md",{},true,"\u002Fen\u002Fparallax",{"title":6,"description":381},"Combining parallax effects with grid layout in a single markdown file.","en\u002Fparallax","TLloYqc9y56lg479jg9EXBNwJRBZnVlIvWtsqyz-Ol4",1793910491787]