docs(Lensflare): add demo

[andretchen0]

This adds a demo to the Lensflare docs page.

It also updates the "Usage" example. It's now a working SFC.

[netlify]

✅ Deploy Preview for cientos-tresjs ready!

Name	Link
🔨 Latest commit	369e992
🔍 Latest deploy log	https://app.netlify.com/sites/cientos-tresjs/deploys/65241a025737270008cac2fc
😎 Deploy Preview	https://deploy-preview-232--cientos-tresjs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alvarosabu]

That looks awesome @andretchen0. I would probably use a darker clear color for the canvas, the teal one does not necessarily provide justice to the effect. 😅

Did you consider adding a GUI with tresleches for the scale?

[andretchen0]

Good call on the color.

Did you consider adding a GUI with tresleches for the scale?

I hadn't considered it for the docs demo – mostly just because Lensflare has a lot of props.

It's no problem though. Would you like me to add a scale control?

---

There's another demo that includes most of the props as Leches controls – including scale – that I was going to add to the playground. In the cientos repo, if you run ...

pnpm run playground

... you can see the demo at:

http://localhost:5173/abstractions/lensflare

[alvarosabu]

Oh yeah @andretchen0 the demo in the playground is the one I used for the video on the announcement. I think it would be cool to add the scale control for the docs demo.

[andretchen0]

@alvarosabu

I've added a Leches controller for the scale, following the example at:

/guide/controls/transform-controls.html

I added small CSS important rule to stick the Leches window to the top, after I noticed this behavior:

Screen.Recording.2023-09-27.at.19.56.10.mov

Should I open a Leches issue, or is there a "blessed" way to handle that?

[alvarosabu]

@alvarosabu

I've added a Leches controller for the scale, following the example at:

/guide/controls/transform-controls.html

I added small CSS important rule to stick the Leches window to the top, after I noticed this behavior:

Screen.Recording.2023-09-27.at.19.56.10.mov
Should I open a Leches issue, or is there a "blessed" way to handle that?

The CSS important will collide with the draggable, that's why is fixed. Maybe we should add an option to place it (left, right, top, bottom 🤔)

[alvarosabu]

@andretchen0 nice work with the demo, just solve the latest conflicts with the main and we are ready to merge

[andretchen0]

@andretchen0 nice work with the demo, just solve the latest conflicts with the main and we are ready to merge

Ok, I've merged in main. I think it's ready to go.