He had two major requirements:<\/p>\n\n\n\n
- \n
- Some text has to wrap around a prism and the text can vary in length.<\/li>\n\n\n\n
- A light ray enters the prism from the left and emerges as a rainbow on the right.<\/li>\n<\/ol>\n\n\n\n
My Process<\/h2>\n\n\n\n
I always try to strike a good balance of performance, extensibility, and maintainability when working on a client project. This requires careful planning before I start writing the actual code.<\/p>\n\n\n\n
Creating the Incoming Ray and the Rainbow<\/h3>\n\n\n\n
In this case, my first instinct was to use Canvas<\/strong> or WebGL<\/strong> to animate the rainbow with JavaScript. But after a bit of thought, I realized I could pull off the same effect more cleanly with just some clever CSS.<\/p>\n\n\n\n
![\"\"](\"https:\/\/hellonitish.com\/blog\/wp-content\/uploads\/2025\/12\/blank-rainbow-1024x565.webp\")
<\/figure>\n\n\n\nI created two
div<\/code> elements: one for the incoming ray<\/strong> and one for the emergent rainbow<\/strong>.<\/p>\n\n\n\nThe incoming ray was simple enough as it was just a thin white rectangle. However, getting its rotation and alignment<\/strong> right took some trial and error.<\/p>\n\n\n\n
For the rainbow, I used a linear gradient background<\/strong> to simulate the colors of refracted light. Then I shaped it so that it\u2019s narrow at one end and wider at the other<\/strong> using a mix of
perspective<\/code> androtateY<\/code>. That gave it the illusion of spreading light. This adjustment was very tricky to get right and required plenty of fine-tuning.<\/p>\n\n\n\nFinally, I added subtle rotation animations<\/strong> with
rotateZ<\/code> and@keyframes<\/code> to make both rays oscillate slightly. Synchronizing both animations was simply a matter of adjusting the animation values so that the rays always move in opposite directions. Once that clicked, the whole thing came alive. A tiny prism made of pure CSS!<\/p>\n\n\n\nMaking the Text Flow Around the Prism<\/h3>\n\n\n\n
The prism itself was an image that Charles provided. My job was to make the text flow around it instead of just filling up a flat, rectangular block.<\/p>\n\n\n\n
![\"\"](\"https:\/\/hellonitish.com\/blog\/wp-content\/uploads\/2025\/12\/rainbow-with-text-1024x560.webp\")
<\/figure>\n\n\n\nI wrapped the entire prism visual in a container element and used the CSS
shape-outside<\/code><\/strong> property to match the slope of the prism. This made the text curve naturally around its edges, giving the layout a more organic flow.<\/p>\n\n\n\nThe incoming and outgoing rays were only meant to animate behind<\/em> the text, not push it out of place, so I positioned them carefully using absolute positioning<\/strong>.<\/p>\n\n\n\n
Since
shape-outside<\/code> requires the element to float, the wrapper naturally jumped out of the document flow, which collapsed the parent element that had the text and the prism visual container. Instead of over-engineering it, I simply cleared the next sibling. Quick, clean, and reliable.<\/p>\n\n\n\nGiving Charles Full Control<\/h3>\n\n\n\n
Charles wanted this section on all pages of his website. That meant I needed a setup where he could update the text in one central place<\/strong> and have it propagate everywhere automatically.<\/p>\n\n\n\n
I tackled this by leveraging Shopify\u2019s theme settings<\/strong>. The section pulls default text from the theme\u2019s central configuration, so any updates there automatically reflect across the site.<\/p>\n\n\n\n
At the same time, I wanted Charles to have the option to override the content on individual pages<\/strong>. I added per-page overrides in the section settings, allowing custom changes without breaking the global defaults.<\/p>\n\n\n\n
I also gave him the flexibility to add up to three additional points<\/strong> on any individual page, in addition to Essentia, Viriditas, and Allevatio, if he chooses.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Every now and then a client asks for something that sounds simple and turns into a mini physics experiment. This time, it was a custom Shopify section from my long term client Charles. The Brief Charles wanted an eye-catching section that highlighted his brand’s unique Trinitas BotanicaTM Methodus philosophy. He had two major requirements: My […]<\/p>\n","protected":false},"author":2,"featured_media":10173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-10163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-studies"],"_links":{"self":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/comments?post=10163"}],"version-history":[{"count":5,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10163\/revisions"}],"predecessor-version":[{"id":10312,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10163\/revisions\/10312"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/media\/10173"}],"wp:attachment":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/media?parent=10163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/categories?post=10163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/tags?post=10163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}