Ring Arc

Slot 0  ·  East  ·  θ = 90°

Arc with Empty Slots

Any ring can be shaped into an arc by declaring some slots empty. The layout assigns panels to filled slots in DOM order and skips the rest — no blank elements needed in the HTML.

/* 8 slots (45° each), start East, 3 empty at the back */
data-foldpage-view-layout-count="8"
data-foldpage-view-layout-start="90"
data-foldpage-view-layout-direction="row"
data-foldpage-view-layout-empty="5,6,7"

Slot 1  ·  Southeast  ·  θ = 135°

Arc Geometry

This arc spans θ = 90° → 270° (the front half of the ring), matching the manual arc demo exactly. World positions are identical — only the authoring method differs.

/* Manual (views-horizontal3.html) */
.p1.foldpage-el { transform: rotateY(-90deg)  translateZ(-700px); }
.p2.foldpage-el { transform: rotateY(-135deg) translateZ(-700px); }
.p3.foldpage-el { transform: rotateY( 180deg) translateZ(-700px); }
.p4.foldpage-el { transform: rotateY( 135deg) translateZ(-700px); }
.p5.foldpage-el { transform: rotateY(  90deg) translateZ(-700px); }

/* Ring layout — equivalent, no per-panel CSS */
data-foldpage-view-layout-count="8" data-foldpage-view-layout-start="90"
data-foldpage-view-layout-empty="5,6,7"
+ data-foldpage-rotate-y="0" on each panel

Slot 2  ·  South  ·  θ = 180°

Arc Variations

Any arc shape follows the same pattern — choose a range, set start, spaces, and empty:

/* Quarter-circle, 4 slots, East to South */
count="4" start="90"

/* Half-circle, 6 slots at 30° each, South-facing */
count="12" start="90" empty="6,7,8,9,10,11"

/* Narrow top arc, 3 panels */
count="6" start="300" empty="3,4,5"

/* Counterclockwise half-circle */
count="8" start="270" direction="row-reverse" empty="5,6,7"

Slot 3  ·  Southwest  ·  θ = 225°

Strength

data-foldpage-view-layout-spacing scales the ring radius. Default is 1.0 (700 px). Values above 1 spread the arc wider; below 1 bring it closer.

/* Tighter arc — 490px radius */
data-foldpage-view-layout-spacing="0.7"

/* Wider arc — 1050px radius */
data-foldpage-view-layout-spacing="1.5"

/* Live update at runtime */
Fold.set({ viewLayout: { spacing: 1.2 } });

Slot 4  ·  West  ·  θ = 270°

Complete Arc Template

<div class="foldpage"
     data-foldpage-view-layout="ring"
     data-foldpage-view-layout-count="8"
     data-foldpage-view-layout-start="90"
     data-foldpage-view-layout-direction="row"
     data-foldpage-view-layout-empty="5,6,7">

  <header data-foldpage-view="0">...</header>

  <section data-foldpage-view data-foldpage-rotate-y="180">East</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">SE</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">South</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">SW</section>
  <section data-foldpage-view data-foldpage-rotate-y="180">West</section>

</div>

See Ring Inward, Ring Outward, or all demos.