5 Things to Decide Before Adding Interactive Content to Your Company Website: Lessons from Building the 3D “LEONIA Island”

Company pages are often closed before they are read. Interactive content, which people understand by looking and touching, can be a way in.

In October, LEONIA added a 3D island, “LEONIA Island,” to its website. The island is shaped like the lion in our logo, and touching a building introduces one of LEONIA’s seven businesses. We described how we built it in our making-of notes. This article sums up five things we decided along the way, for anyone considering something similar.

1. Decide, in one sentence, what people should understand by touching it

Interactive content can easily end up being just fun. If you first decide in one sentence what visitors should take away, choosing which effects to keep becomes much easier.

For LEONIA Island, the sentence was: “Let people learn about our seven businesses by touching them, before reading.” So the island’s main buildings stand for the seven businesses; touching one opens a description that leads straight to that business’s page. The three hidden coins start out near business buildings, so that hunting for them leads people to touch the buildings.

Anything that did not support that sentence was left out. What you decide is less what to put in than what to leave out.

2. Write the text that search engines read separately from the 3D

Google runs a page’s JavaScript and uses the rendered HTML to index it. Google can only follow links written as <a> elements with an href attribute. It is safest to assume that text and buttons drawn inside a 3D scene will not be read as text or links.

For LEONIA Island, the island is introduced in the top page’s heading and text, each business is described on its own page, and the making-of is in a column. The island is the entrance; the text is the content.

• Give the page with interactive content a heading and a description
• Publish what the content introduces as text on other pages too
• Use normal links to go from inside the content to other pages

3. Keep it light: decide when to load, run and stop

3D can easily slow down a top page. Google considers a page “good” when its main content appears (LCP) in under 2.5 seconds.

On our top page, only a still image (about 70–90 KB) is shown at first. The 3D parts (about 600 KB for the 3D library alone) start loading only when the island comes close to the screen. The island moves only while at least 30% of it is visible, and stops when it scrolls off screen or when the visitor switches to another browser tab.

• Make what you show first (such as an image) light
• Load heavy parts only when they are needed
• Don’t animate what can’t be seen

4. Offer three ways to see it, so everyone can use it

Depending on their settings or device, 3D may not suit everyone. Many phones and computers have a setting to reduce motion, because animation can distract some people or make them dizzy or nauseous.

LEONIA Island switches automatically to suit each visitor:

• Devices that can run 3D: the 3D island
• Devices with data saver on, a very slow connection, little memory, or no 3D support: a short looping video (about 0.4–0.5 MB)
• Devices set to “reduce motion”: a still image

The island is available in Japanese, English and Korean. After launch, we also added to the island’s town: tactile paving, a person walking with a white cane and a guide dog, accessible pedestrian signals that sound, people talking in sign language, a traveler with a suitcase, and greetings in many languages. We wanted the town on the screen, too, to be a place where everyone can come and go.

5. Make sure you can measure whether it worked

If you stop at building it, you cannot tell whether interactive content is worth keeping. Decide what to measure before launch.

For LEONIA Island, we record three things:

• Whether the island was shown on the top page, whether the 3D loaded, and whether people opened the full-screen island (Google Analytics events)
• Which social media platform people came from (a separate tracking link for each platform)
• A “LEONIA Island” option in the contact form’s “How did you hear about us?” question

Once we have enough data, we plan to share the results in this column.

In closing

Interactive content does not have to be large-scale 3D. After the island, we have been adding small prototypes to our Toybox, such as a banana you pick to learn about our businesses. What matters is deciding what you want to convey, and designing search, page weight, accessibility and measurement together with it.

LEONIA works with you from planning and building a website to improving it after launch. Even if it is only an idea for now, feel free to ask whether an entrance like this could work for your site.

Figures about LEONIA Island (file sizes and switching conditions) are from the live site as of October 2026.

Sources: Google Search Central, “Understand the JavaScript SEO basics”／web.dev, “Largest Contentful Paint (LCP)”／web.dev, “prefers-reduced-motion: Sometimes less movement is more”