Infinite Zoom Images: How Narrative Tapestry Learning Works

Imagine looking across a meadow. You notice a bee on a purple flower. You choose the bee, move closer, and discover pollen caught in its branched hairs. From there you can enter one pollen grain or inspect the fine structure of the wing. At every step, the picture itself is the map.

That is the basic idea behind an infinite zoom image. Interakly calls this kind of guided, branching experience a Narrative Tapestry. It turns one image into a connected set of visual worlds. The learner does not read a long page and then look for the thing being described. They select the thing, see it in context, and decide where to look next.

Live interactive example

Explore the bee journey yourself

Select the glass portal, choose a microscopic branch, then use Back to return to the meadow.

Dive into the bee

Start with the meadow, then follow the bee into a pollen grain or its wing. You can revisit every level at any time.

Bee Narrative Tapestry

Overview → detail → choice

Cover world

The worlds inside a meadow

A quiet marker says where the journey begins without hiding the bee underneath it.

Level 01 · centimeters to millimeters

Meet the pollen courier

Branch A

Read the wing lattice

Branch B

Enter one pollen grain

See Narrative Tapestry

What is an infinite zoom image?

An infinite zoom image is an interactive visual experience that moves from a broad view into deeper levels of detail. The word “infinite” describes the feeling that another meaningful world can exist inside the current one. It does not mean the browser enlarges one photograph forever.

A normal zoom tool makes the same pixels larger. Eventually the image becomes blurry. A Narrative Tapestry uses semantic zoom: the meaning becomes more specific as the learner moves closer. The meadow becomes a bee. The bee becomes a pollen grain or a wing. Each level can use the best image and explanation for that scale.

Researchers exploring multiscale museum images have described how zoomable environments can support careful observation and engagement with scientific content. The important part is the design around the image: navigation, annotations, and a reason to explore—not zoom for its own sake. See the Carnegie Mellon team's work on gigapixel image environments.

The bee journey in one minute

The six parts of a Narrative Tapestry

1. The cover world

The cover is the first image and the learner's home base. It should answer three questions immediately: Where am I? What should I notice? Where can I begin? In the bee example, the meadow provides place, the bee provides focus, and the portal provides the first action.

2. The portal

A portal is a clickable region that leads to another scene. It should be visible enough to discover but quiet enough to preserve the image. The glass-style bee portal is partly transparent, so the learner can still see the subject underneath. Its label uses an action such as “Dive into the bee,” not a vague word such as “More.”

3. The scene

A scene is a new visual level with its own image, title, short explanation, scale label, and portals. Each scene should answer one main question. “The pollen courier” explains how the bee carries pollen. It does not try to teach the whole of pollination at once.

4. The knowledge layer

The knowledge layer is the explanation attached to the current scene. Keep it close to the image it describes. Start with the simple idea, then add the exact term. For example: first explain that the outer wall protects a pollen grain, then name that wall the exine.

5. The branch

A branch lets the learner choose between related directions. A useful branch changes the question, not merely the background. The wing branch asks how a light structure survives repeated force. The pollen branch asks how a living cell is protected and recognized.

6. The route home

Every scene needs a clear Back action. At the first detailed scene, Back returns to the cover. Deeper scenes return to their parent. This makes exploration safe: learners know they can follow their curiosity without becoming trapped.

What happens when a learner clicks

A polished transition should help the learner understand the move. The selected region becomes the visual destination. The camera eases toward it, the old scene gives way, and the new scene resolves from the same area. The motion is calm and short. It should feel like moving through the picture, not watching a decorative slideshow effect.

Forward and backward motion have different jobs. Moving forward can use a gentle push into the selected detail. Moving back should feel like returning: the current view recedes and the parent scene reappears. A mirrored “zoom in” effect on Back would give the wrong spatial message.

How the images stay connected

The biggest creative challenge is continuity. The new image must feel like it came from the selected region even when it is a different file or an AI-generated scene. Four kinds of continuity help:

• Subject continuity: the same bee, wing, pollen, room, product, or place remains the focus.
• Visual continuity: light direction, color, texture, and camera angle do not change without a reason.
• Scale continuity: labels such as “centimeters to millimeters” explain how far the learner has moved.
• Idea continuity: each new scene answers a question raised by the parent scene.

When AI helps create the next scene, Interakly can use the exact crop chosen by the author as visual context. The crop is not the finished lesson. It is an anchor that tells the model what must stay connected. The author still checks the image, wording, scientific accuracy, and route.

How branching works

Think of the journey as a small tree. The cover is the root. Every portal points to one child scene. A child can end the route or contain more portals. Back follows the same tree in reverse. This structure is simple enough for learners to understand without a progress bar.

For education, put the knowledge everyone needs on the trunk. Use branches for different examples, levels of depth, or points of view. For marketing, the trunk can explain the main promise while branches let visitors inspect design, materials, use cases, or proof.

How to plan your own journey

Start with the learning outcome, not the effect. Complete this sentence: “After exploring, a person should be able to…” The bee outcome might be: “Explain how a bee's body, pollen wall, and wing structure support pollination and flight.”

How to build it in Interakly

1. Start a new image and choose Build a Narrative Tapestry.
2. Upload a cover or describe one for AI to generate. Add a useful title and alt text.
3. Choose the first doorway by drawing over the exact detail learners will enter.
4. Create the next scene from an upload, a generated continuation, or an existing image.
5. Add the scene title, explanation, scale label, and alt text.
6. Add another doorway if the route continues. Use branches only where a real choice exists.
7. Preview the complete route forward and backward on desktop and phone.
8. Publish, share a link, or embed the experience in a website or LMS.

Design rules that make it feel good

• Keep the marker small. It should point to the detail, not cover it.
• Use action labels. “Inspect the wing” is clearer than “Click here.”
• Keep text short at first. Lead with the main idea and allow deeper reading without blocking the image.
• Use calm transitions. One spatial movement is enough. Avoid particles, spinning, repeated blur, and several effects at once.
• Preserve the authored composition. Images, markers, and labels should scale together across screen sizes.
• Let people revisit. Exploration is not a one-way progress checklist. Learners should be able to return to any scene.

Accessibility and mobile

An image-led lesson still needs a complete non-visual path. Give every image useful alt text. Give every portal a specific accessible name. Make portals reachable by keyboard and large enough to activate by touch, even when the visible glass icon stays small. Keep focus in a logical order and return it to the parent portal after Back.

On a phone, do not rebuild the composition with independently sized markers. Scale the image and its authored elements as one system. Open longer explanations in a readable contained panel, preserve the route home, and test landscape as well as portrait.

Ways to use infinite zoom images

• Science: ecosystem → organism → organ → cell → structure.
• Geography: world → region → city → site → human story.
• History: archive photo → person → object → primary source.
• Art: full work → composition → brushwork → symbol → interpretation.
• Product marketing: product → feature → material → proof → use case.
• Property and travel: destination → building → room → detail → booking reason.
• Technical training: machine → assembly → component → fault → corrective action.

How to know if it worked

Do not judge only by clicks. A click can mean curiosity or confusion. Ask whether people can explain the connection after exploring. Useful signals include:

• Most learners discover the first portal without instructions.
• They can predict what Back will do.
• They explore a branch because its question interests them.
• They can describe how the branch connects to the cover.
• They revisit a scene when answering a later question.
• The experience works with keyboard, touch, and reduced motion.

A simple final prompt can reveal more than a progress bar: “How do the pollen grain and wing solve different problems for the bee?” If a learner can answer in their own words, the journey has become more than an effect.

FAQ