@fxshelf/card-orbit
Version:
Path-constrained 3D card orbit carousel for React and Vue — rise, arc, exit. No Framer Motion / GSAP. Copy-as-source friendly.
1 lines • 3.08 kB
Source Map (JSON)
{"version":3,"sources":["../src/core/styles.css"],"sourcesContent":[".card-orbit {\n position: relative;\n margin-left: auto;\n margin-right: auto;\n width: 100%;\n max-width: 1220px;\n touch-action: pan-y;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.card-orbit--desktop-only {\n display: none;\n}\n\n@media (min-width: 1024px) {\n .card-orbit--desktop-only {\n display: block;\n height: 82vh;\n max-height: 940px;\n }\n}\n\n@media (min-width: 1280px) {\n .card-orbit--desktop-only {\n max-width: 1400px;\n max-height: 1060px;\n }\n}\n\n.card-orbit__stage {\n position: absolute;\n inset: 0;\n cursor: grab;\n transform-style: preserve-3d;\n transform: rotateX(3deg) rotateY(-4deg);\n}\n\n.card-orbit__stage:active {\n cursor: grabbing;\n}\n\n.card-orbit__card {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 62%;\n margin: 0;\n}\n\n.card-orbit__image {\n display: block;\n width: 100%;\n height: auto;\n border-radius: 18px;\n box-shadow: 0 22px 48px rgba(20, 20, 20, 0.22);\n}\n\n/* Mobile marquee fallback */\n.card-orbit-mobile {\n margin-top: 1.5rem;\n width: 100vw;\n max-width: 100vw;\n margin-left: calc(50% - 50vw);\n overflow: hidden;\n}\n\n@media (min-width: 1024px) {\n .card-orbit-mobile--desktop-hide {\n display: none;\n }\n}\n\n.card-orbit-mobile__track {\n display: flex;\n width: max-content;\n gap: 0.75rem;\n will-change: transform;\n animation: card-orbit-mobile-marquee 28s linear infinite;\n}\n\n@media (min-width: 640px) {\n .card-orbit-mobile__track {\n gap: 1rem;\n }\n}\n\n.card-orbit-mobile__card {\n flex: none;\n width: 260px;\n margin: 0;\n overflow: hidden;\n border-radius: 18px;\n}\n\n@media (min-width: 640px) {\n .card-orbit-mobile__card {\n width: 320px;\n }\n}\n\n.card-orbit-mobile__image {\n display: block;\n width: 100%;\n height: auto;\n}\n\n@keyframes card-orbit-mobile-marquee {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n}\n"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,eAAa;AACb,gBAAc;AACd,SAAO;AACP,aAAW;AACX,gBAAc;AACd,eAAa;AACb,uBAAqB;AACvB;AAEA,CAAC;AACC,WAAS;AACX;AAEA,QAAO,WAAY;AACjB,GALD;AAMG,aAAS;AACT,YAAQ;AACR,gBAAY;AACd;AACF;AAEA,QAAO,WAAY;AACjB,GAbD;AAcG,eAAW;AACX,gBAAY;AACd;AACF;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,UAAQ;AACR,mBAAiB;AACjB,aAAW,QAAQ,MAAM,QAAQ;AACnC;AAEA,CARC,iBAQiB;AAChB,UAAQ;AACV;AAEA,CAAC;AACC,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY,EAAE,KAAK,KAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC3C;AAGA,CAAC;AACC,cAAY;AACZ,SAAO;AACP,aAAW;AACX,eAAa,KAAK,IAAI,EAAE;AACxB,YAAU;AACZ;AAEA,QAAO,WAAY;AACjB,GAAC;AACC,aAAS;AACX;AACF;AAEA,CAAC;AACC,WAAS;AACT,SAAO;AACP,OAAK;AACL,eAAa;AACb,aAAW,0BAA0B,IAAI,OAAO;AAClD;AAEA,QAAO,WAAY;AACjB,GATD;AAUG,SAAK;AACP;AACF;AAEA,CAAC;AACC,QAAM;AACN,SAAO;AACP,UAAQ;AACR,YAAU;AACV,iBAAe;AACjB;AAEA,QAAO,WAAY;AACjB,GATD;AAUG,WAAO;AACT;AACF;AAEA,CAAC;AACC,WAAS;AACT,SAAO;AACP,UAAQ;AACV;AAEA,WA7Ba;AA8BX;AACE,eAAW,WAAW;AACxB;AACA;AACE,eAAW,WAAW;AACxB;AACF;","names":[]}