# Split Showcase

> Two joined cards split by a dotted line; the hovered side springs apart into its own rounded card.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/split-showcase/
- Licence: MIT (do anything, keep the notice)

## Code

`index.html`

```html
<!--
  Ported to plain HTML/CSS/JS for OwnlyPlans from ObsidianUI (https://github.com/Atharvsinh-codez/ObsidianUI)
  MIT License — Copyright (c) 2026 ObsidianUI
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
  documentation files (the "Software"), to deal in the Software without restriction, including without limitation
  the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
  permit persons to whom the Software is furnished to do so, subject to the following conditions:
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
-->
<div class="op-ss-stage">
  <div class="op-split-showcase">
    <div class="op-ss-cell"><a class="op-ss-card op-ss-left" href="#" aria-label="Your Brand — Hosting Partner">
      <span class="op-ss-body"><span class="op-ss-logo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="3" y="3" width="26" height="26" rx="8" fill="currentColor"/><path d="M10 20l6-9 6 9z" fill="var(--ss-bg)"/></svg>Your Brand</span></span>
      <span class="op-ss-tag">Hosting Partner</span></a></div>
    <div class="op-ss-divider" aria-hidden="true"></div>
    <div class="op-ss-cell"><a class="op-ss-card op-ss-right" href="#" aria-label="Partner Co. — Analytics Partner">
      <span class="op-ss-body"><span class="op-ss-logo"><svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="11" cy="16" r="8" fill="currentColor" opacity=".45"/><circle cx="21" cy="16" r="8" fill="currentColor"/></svg>Partner Co.</span></span>
      <span class="op-ss-tag">Analytics Partner</span></a></div>
  </div>
</div>
```

`styles.css`

```css
/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */
.op-ss-stage{min-height:320px;display:grid;place-items:center;padding:3rem 1.5rem;background:#fff;color:#0a0a0a;font-family:Inter,system-ui,sans-serif;--ss-bg:#e4e4e7;--ss-border:#e5e5e5;--ss-muted:#737373}
.op-split-showcase{position:relative;display:grid;width:100%;max-width:64rem;grid-template-columns:1fr;gap:0;overflow:visible}
@media (min-width:640px){.op-split-showcase{grid-template-columns:1fr 1fr}}
.op-ss-cell{position:relative;min-width:0}
.op-ss-card{display:flex;height:100%;min-height:11rem;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1.5rem;color:inherit;text-decoration:none;user-select:none;background:var(--ss-bg);border:1px solid color-mix(in oklab,var(--ss-border) 40%,transparent);transition:border-radius .3s,box-shadow .3s,border-color .3s;will-change:transform;outline:none}
@media (min-width:640px){.op-ss-card{padding:2rem}}
.op-ss-left{border-bottom-width:0;border-radius:32px 32px 0 0}
.op-ss-right{border-top-width:0;border-radius:0 0 32px 32px}
@media (min-width:640px){.op-ss-left{border-right-width:0;border-bottom-width:1px;border-radius:32px 0 0 32px}.op-ss-right{border-left-width:0;border-top-width:1px;border-radius:0 32px 32px 0}}
.op-ss-card[data-active]{position:relative;z-index:10;border-radius:32px;border:1px solid var(--ss-border);box-shadow:0 25px 50px -12px rgb(0 0 0/.1)}
.op-ss-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center}
.op-ss-logo{display:inline-flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700;letter-spacing:-.025em}
.op-ss-logo svg{width:2rem;height:2rem;flex-shrink:0}
.op-ss-tag{position:relative;top:.5rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ss-muted)}
.op-ss-divider{pointer-events:none;position:absolute;z-index:10;left:2rem;right:2rem;top:50%;height:0;transform:translateY(-50%);border-top:2px dotted #a1a1aa;transition:opacity 250ms ease-out}
@media (min-width:640px){.op-ss-divider{left:50%;right:auto;top:2rem;bottom:2rem;width:0;height:auto;transform:translateX(-50%);border-top:0;border-left:2px dotted #a1a1aa}}
.op-split-showcase[data-any] .op-ss-divider{opacity:0}
```

`script.js`

```js
(function(){
  document.querySelectorAll('.op-split-showcase').forEach(function(root){
    var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
    var cards=[].slice.call(root.querySelectorAll('.op-ss-card'));
    // Spring (stiffness 350, damping 24) on x and scale, as in the original.
    var st=cards.map(function(){return{x:0,s:1,vx:0,vs:0,tx:0,ts:1,raf:0}});
    function run(i){var c=st[i];cancelAnimationFrame(c.raf);var last=performance.now();
      (function step(now){var dt=Math.min(.032,(now-last)/1000);last=now;var ax=-350*(c.x-c.tx)-24*c.vx,as=-350*(c.s-c.ts)-24*c.vs;c.vx+=ax*dt;c.x+=c.vx*dt;c.vs+=as*dt;c.s+=c.vs*dt;
        cards[i].style.transform='translateX('+c.x+'px) scale('+c.s+')';
        if(Math.abs(c.x-c.tx)>.01||Math.abs(c.vx)>.01||Math.abs(c.s-c.ts)>.0005||Math.abs(c.vs)>.0005)c.raf=requestAnimationFrame(step);else{c.x=c.tx;c.s=c.ts;cards[i].style.transform='translateX('+c.x+'px) scale('+c.s+')'}})(last)}
    var hovered=null,focused=null;
    function update(){var a=hovered!=null?hovered:focused;if(a!=null)root.setAttribute('data-any','');else root.removeAttribute('data-any');
      cards.forEach(function(card,i){var on=a===i;if(on)card.setAttribute('data-active','');else card.removeAttribute('data-active');if(reduce)return;st[i].tx=on?(i===0?-12:12):0;st[i].ts=on?.98:1;run(i)})}
    cards.forEach(function(card,i){card.addEventListener('mouseenter',function(){hovered=i;update()});card.addEventListener('mouseleave',function(){hovered=null;update()});
      card.addEventListener('focus',function(){focused=i;update()});card.addEventListener('blur',function(){focused=null;update()});card.addEventListener('click',function(e){if(card.getAttribute('href')==='#')e.preventDefault()})});
  });
})();
```

## About

Two joined cards split by a dotted line; the hovered side springs apart into its own rounded card. Ported to plain HTML, CSS and JavaScript from ObsidianUI (github.com/Atharvsinh-codez/ObsidianUI), which is released under the MIT License. The original copyright notice is kept in the code.

---
Also available as JSON: https://ownlyplans.com/bhaskar/split-showcase/?format=json
MCP server: https://ownlyplans.com/mcp