> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-media/spline.md).

# Spline ✅

{% hint style="success" %}
**RELEASED** in **Sygnal Media v0.1.1**  
{% endhint %}

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FzOa28gwthDbdek1mYJHl%2Fimage.png?alt=media&amp;token=3069381b-ccee-4e2e-a033-93327e6ac673" alt=""><figcaption></figcaption></figure>

## Goals&#x20;

* Allow your Spline elements to be slotted, by making them components &#x20;
* Allow that component to support bindable properties so that the Spline can be set per instance or via CMS Link binding, to a Link field&#x20;
  * This encourages a valid URL &#x20;

## Properties&#x20;

<table><thead><tr><th width="139">Property</th><th width="132">Type</th><th>Description </th></tr></thead><tbody><tr><td>Spline URL</td><td>Link</td><td>Link to the .splinecode URL, e.g. <a href="https://prod.spline.design/yVDxdZWJmBEGK11j/scene.splinecode">https://prod.spline.design/yVDxdZWJmBEGK11j/scene.splinecode</a></td></tr><tr><td>Width</td><td>String</td><td>Width measurement of the component<br>Default 100%</td></tr><tr><td>Height</td><td>String</td><td>Height measurement of the component.<br>Default 500px</td></tr><tr><td>Responsive</td><td>Boolean</td><td>Default true </td></tr><tr><td>Lazy Load</td><td>Boolean</td><td>Default false </td></tr></tbody></table>

## Technical Notes&#x20;

### NC Analysis&#x20;

Webflow has a Spline native component, and I've done some experiements to see if it can be adapted directly.&#x20;

Webflow's pre-JS render;

```html
<div
  data-w-id="9da523ff-d351-71ca-bfc7-b6f306296a16"
  data-animation-type="spline"
  data-spline-url="https://prod.spline.design/yVDxdZWJmBEGK11j/scene.splinecode"
>
  <canvas></canvas>
</div>
```

Testing showed that a basic custom elements recreation of the Spline HTML has some problems;

* Doesn't render in the designer&#x20;
* Appears to have rendering issues ( not investigated ) in the published HTML&#x20;
* Requires script hacks
  * To generate the UUID ID&#x20;
  * To pull the URL from a Link field&#x20;

{% hint style="warning" %}
Determined that this is more suitable for a CC implementation.  &#x20;
{% endhint %}

## Technical Notes&#x20;

* Component type: **Standard**&#x20;