[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fspline":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":40,"examples":60,"showcases":61,"links":371,"dates":407},"\u002Fexamples\u002Fapps\u002Fspline","detail","apps",true,{"title":9,"description":10,"og_image":11},"Spline design examples - Nicelydone","Explore Spline UI design examples. Design tool for 3D web experiences","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1bc06152-770a-4e20-b293-f8cb72edad55.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Spline design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":39},"SaaS app examples",[24],{"title":25,"links":26},"Explore Spline",[27,30,33,36],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fspline\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Fspline\u002Fflows",{"label":34,"to":35},"UI components","\u002Fexamples\u002Fapps\u002Fspline\u002Fcomponents",{"label":37,"to":38},"marketing pages","\u002Fexamples\u002Fapps\u002Fspline\u002Fmarketing",[],{"title":41,"slug":42,"description":43,"logo":44,"url":45,"twitter_username":46,"categories":47},"Spline","spline","Design tool for 3D web experiences","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fspline-9d66cc4c.png","https:\u002F\u002Fspline.design","splinetool",[48,52,56],{"id":49,"title":50,"slug":51},8,"Design","design",{"id":53,"title":54,"slug":55},7,"Web Development","web-development",{"id":57,"title":58,"slug":59},23,"Collaboration","collaboration",[],[62,362,365,368],{"family":63,"examples":64},"screens",[65,114,140,160,180,201,220,255,275,290,303,340],{"uuid":66,"title":67,"description":68,"canonical_path":29,"image":11,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":73,"component_categories":103,"app":112},"1bc06152-770a-4e20-b293-f8cb72edad55","iPhone 14 Pro · Spline","Design editor where the user manipulates a 3D iPhone model, manages layers, and configures camera settings.",3024,1738,"iPhone 14 Pro · Spline from Spline","screen",[74,83,92,97],{"id":75,"label":76,"slug":77,"rank":78,"group":79},55,"Design Editor","design-editor",0,{"id":80,"label":81,"slug":82},5,"Media & Tools","media-and-tools",{"id":84,"label":85,"slug":86,"rank":87,"group":88},11,"Edit","edit",1,{"id":89,"label":90,"slug":91},2,"Actions","actions",{"id":93,"label":94,"slug":95,"rank":89,"group":96},24,"Share","share",{"id":89,"label":90,"slug":91},{"id":98,"label":99,"slug":100,"rank":101,"group":102},22,"Search","search",3,{"id":89,"label":90,"slug":91},[104,108],{"id":105,"title":106,"slug":107},260,"Badge","badge",{"id":109,"title":110,"slug":111},175,"Button","button",{"slug":42,"title":41,"logo":44,"categories":113},[],{"uuid":115,"title":67,"description":116,"canonical_path":29,"image":117,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":118,"component_categories":132,"app":138},"33e7048a-6f93-4ced-9bdf-c53285f07af1","Design editor where a user is viewing an iPhone 3D model and reading a comment thread left by a collaborator directly on the canvas.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F33e7048a-6f93-4ced-9bdf-c53285f07af1.png",[119,121,128,130],{"id":75,"label":76,"slug":77,"rank":78,"group":120},{"id":80,"label":81,"slug":82},{"id":122,"label":123,"slug":124,"rank":87,"group":125},106,"Comments","comments",{"id":84,"label":126,"slug":127},"Social & Collaboration","social-and-collaboration",{"id":93,"label":94,"slug":95,"rank":89,"group":129},{"id":89,"label":90,"slug":91},{"id":84,"label":85,"slug":86,"rank":101,"group":131},{"id":89,"label":90,"slug":91},[133,137],{"id":134,"title":135,"slug":136},214,"Popover","popover",{"id":109,"title":110,"slug":111},{"slug":42,"title":41,"logo":44,"categories":139},[],{"uuid":141,"title":67,"description":142,"canonical_path":29,"image":143,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":144,"component_categories":151,"app":158},"5846215a-cfeb-4778-9f33-9ee30703a0b0","Design editor where the user views a 3D iPhone model and reads a thread of comments from collaborators.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5846215a-cfeb-4778-9f33-9ee30703a0b0.png",[145,147,149],{"id":75,"label":76,"slug":77,"rank":78,"group":146},{"id":80,"label":81,"slug":82},{"id":122,"label":123,"slug":124,"rank":87,"group":148},{"id":84,"label":126,"slug":127},{"id":93,"label":94,"slug":95,"rank":89,"group":150},{"id":89,"label":90,"slug":91},[152,153,157],{"id":134,"title":135,"slug":136},{"id":154,"title":155,"slug":156},169,"Avatar","avatar",{"id":105,"title":106,"slug":107},{"slug":42,"title":41,"logo":44,"categories":159},[],{"uuid":161,"title":67,"description":162,"canonical_path":29,"image":163,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":164,"component_categories":171,"app":178},"8057abcc-9fee-405b-9713-595122ecd184","Design editor canvas where the user is viewing a 3D model of an iPhone with floating toolbars for view controls and object duplication.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8057abcc-9fee-405b-9713-595122ecd184.png",[165,167,169],{"id":75,"label":76,"slug":77,"rank":78,"group":166},{"id":80,"label":81,"slug":82},{"id":84,"label":85,"slug":86,"rank":87,"group":168},{"id":89,"label":90,"slug":91},{"id":93,"label":94,"slug":95,"rank":89,"group":170},{"id":89,"label":90,"slug":91},[172,176,177],{"id":173,"title":174,"slug":175},277,"Button group","button-group",{"id":105,"title":106,"slug":107},{"id":109,"title":110,"slug":111},{"slug":42,"title":41,"logo":44,"categories":179},[],{"uuid":181,"title":67,"description":182,"canonical_path":29,"image":183,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":184,"component_categories":196,"app":199},"f544a13d-1a77-40a2-b342-36d3ce6b48ce","Design editor where the user manipulates a 3D model of an iPhone with layers, camera settings, and a duplicate file option.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff544a13d-1a77-40a2-b342-36d3ce6b48ce.png",[185,187,189,191],{"id":75,"label":76,"slug":77,"rank":78,"group":186},{"id":80,"label":81,"slug":82},{"id":84,"label":85,"slug":86,"rank":87,"group":188},{"id":89,"label":90,"slug":91},{"id":93,"label":94,"slug":95,"rank":89,"group":190},{"id":89,"label":90,"slug":91},{"id":192,"label":193,"slug":194,"rank":101,"group":195},15,"Import & Export","import-and-export",{"id":89,"label":90,"slug":91},[197,198],{"id":173,"title":174,"slug":175},{"id":109,"title":110,"slug":111},{"slug":42,"title":41,"logo":44,"categories":200},[],{"uuid":202,"title":67,"description":203,"canonical_path":29,"image":204,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":205,"component_categories":215,"app":218},"1a40bb3e-e5e0-42f5-b80c-46326fcd289b","Design editor where the user manipulates a 3D iPhone model with a layers panel on the left and camera settings on the right.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1a40bb3e-e5e0-42f5-b80c-46326fcd289b.png",[206,208,213],{"id":75,"label":76,"slug":77,"rank":78,"group":207},{"id":80,"label":81,"slug":82},{"id":209,"label":210,"slug":211,"rank":87,"group":212},58,"Media Editor","media-editor",{"id":80,"label":81,"slug":82},{"id":93,"label":94,"slug":95,"rank":89,"group":214},{"id":89,"label":90,"slug":91},[216,217],{"id":173,"title":174,"slug":175},{"id":154,"title":155,"slug":156},{"slug":42,"title":41,"logo":44,"categories":219},[],{"uuid":221,"title":67,"description":222,"canonical_path":29,"image":223,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":224,"component_categories":238,"app":253},"ceb4d4a1-b5b6-44f2-b7da-63c0f1e5085a","Design editor where the user is browsing a modal library of 3D objects like bags and body parts to add to their scene.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fceb4d4a1-b5b6-44f2-b7da-63c0f1e5085a.png",[225,229,236],{"id":53,"label":226,"slug":227,"rank":78,"group":228},"Add & Create","add-and-create",{"id":89,"label":90,"slug":91},{"id":230,"label":231,"slug":232,"rank":87,"group":233},79,"Browse","browse",{"id":49,"label":234,"slug":235},"Pages & Content","pages-and-content",{"id":209,"label":210,"slug":211,"rank":89,"group":237},{"id":80,"label":81,"slug":82},[239,243,247,251,252],{"id":240,"title":241,"slug":242},284,"Modal","modal",{"id":244,"title":245,"slug":246},233,"Tabs","tabs",{"id":248,"title":249,"slug":250},174,"Card","card",{"id":105,"title":106,"slug":107},{"id":109,"title":110,"slug":111},{"slug":42,"title":41,"logo":44,"categories":254},[],{"uuid":256,"title":67,"description":257,"canonical_path":29,"image":258,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":259,"component_categories":272,"app":273},"832d9a5a-14e0-4747-b797-c2fed1a360c7","Design editor canvas showing a 3D iPhone model with floating instructions to replace the screen image and a banner indicating the user is in their personal camera view.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F832d9a5a-14e0-4747-b797-c2fed1a360c7.png",[260,262,264],{"id":75,"label":76,"slug":77,"rank":78,"group":261},{"id":80,"label":81,"slug":82},{"id":209,"label":210,"slug":211,"rank":87,"group":263},{"id":80,"label":81,"slug":82},{"id":265,"label":266,"slug":267,"rank":89,"group":268},119,"Info","info",{"id":269,"label":270,"slug":271},12,"States & Feedback","states-and-feedback",[],{"slug":42,"title":41,"logo":44,"categories":274},[],{"uuid":276,"title":67,"description":277,"canonical_path":29,"image":278,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":279,"component_categories":286,"app":288},"d4d1b8f1-2d18-4a7c-a2bb-44ef6c1cc64b","Design editor presentation view showing an interactive 3D iPhone model with floating instructions for replacing the screen image.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd4d1b8f1-2d18-4a7c-a2bb-44ef6c1cc64b.png",[280,282,284],{"id":75,"label":76,"slug":77,"rank":78,"group":281},{"id":80,"label":81,"slug":82},{"id":209,"label":210,"slug":211,"rank":87,"group":283},{"id":80,"label":81,"slug":82},{"id":84,"label":85,"slug":86,"rank":89,"group":285},{"id":89,"label":90,"slug":91},[287],{"id":109,"title":110,"slug":111},{"slug":42,"title":41,"logo":44,"categories":289},[],{"uuid":291,"title":67,"description":292,"canonical_path":29,"image":293,"width":69,"height":70,"image_alt":71,"kind":72,"patterns":294,"component_categories":299,"app":301},"f7df3d45-c6b0-4620-8436-687309bed305","Full-screen design editor canvas displaying an interactive 3D smartphone model, featuring a minimal floating toolbar to reset the view and inline helper text providing editing instructions.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff7df3d45-c6b0-4620-8436-687309bed305.png",[295,297],{"id":75,"label":76,"slug":77,"rank":78,"group":296},{"id":80,"label":81,"slug":82},{"id":209,"label":210,"slug":211,"rank":87,"group":298},{"id":80,"label":81,"slug":82},[300],{"id":109,"title":110,"slug":111},{"slug":42,"title":41,"logo":44,"categories":302},[],{"uuid":304,"title":305,"description":306,"canonical_path":29,"image":307,"width":69,"height":308,"image_alt":309,"kind":72,"patterns":310,"component_categories":319,"app":338},"966bdcff-fc2c-487c-8e03-0749b362818f","Spline Pricing - Interactive 3D experiences in real-time in the b","Pricing page where the user compares Basic, Super, and Super Team plans via a feature matrix and reads frequently asked questions before starting.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F966bdcff-fc2c-487c-8e03-0749b362818f.png",10728,"Spline Pricing - Interactive 3D experiences in real-time in the b from Spline",[311],{"id":312,"label":313,"slug":314,"rank":78,"group":315},89,"Pricing","pricing",{"id":316,"label":317,"slug":318},9,"Plans & Limits","plans-and-limits",[320,324,328,332,336,337],{"id":321,"title":322,"slug":323},258,"Header","header",{"id":325,"title":326,"slug":327},189,"FAQ","faq",{"id":329,"title":330,"slug":331},168,"Accordion","accordion",{"id":333,"title":334,"slug":335},202,"Footer","footer",{"id":105,"title":106,"slug":107},{"id":109,"title":110,"slug":111},{"slug":42,"title":41,"logo":44,"categories":339},[],{"uuid":341,"title":41,"description":342,"canonical_path":29,"image":343,"width":69,"height":70,"image_alt":344,"kind":72,"patterns":345,"component_categories":357,"app":360},"5e7633bc-f4ac-4d5c-adb6-f7832cfe6c22","Sign-in screen where the user authenticates with Google or enters their email to log in or register.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5e7633bc-f4ac-4d5c-adb6-f7832cfe6c22.png","Spline from Spline",[346,353],{"id":347,"label":348,"slug":349,"rank":78,"group":350},4,"Sign In","sign-in",{"id":87,"label":351,"slug":352},"Access & Account","access-and-account",{"id":87,"label":354,"slug":355,"rank":87,"group":356},"Account Setup","account-setup",{"id":87,"label":351,"slug":352},[358,359],{"id":154,"title":155,"slug":156},{"id":109,"title":110,"slug":111},{"slug":42,"title":41,"logo":44,"categories":361},[],{"family":363,"examples":364},"flows",[],{"family":366,"examples":367},"components",[],{"family":369,"examples":370},"pages",[],[372,374,376,378,380,383,386,389,391,395,399,403],{"label":373,"to":29},"Spline product screens",{"label":375,"to":38},"Spline marketing pages",{"label":377,"to":32},"Spline user flows",{"label":379,"to":35},"Spline UI components",{"label":381,"to":382},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":384,"to":385},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":387,"to":388},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":390,"to":18},"All SaaS app examples",{"label":392,"to":393,"description":394},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":396,"to":397,"description":398},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":400,"to":401,"description":402},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":404,"to":405,"description":406},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":408,"updated_at":409},"2023-03-29T14:31:31.000Z","2026-09-13T13:02:39.000Z"]