The Layer Magic way

The standard version of Layer Magic comes as a WordPress plugin.

The code is written using JavaScript and PHP languages.

If you want to edit or alter the code you will have to check the terms from the license.

That being said, lets take a deep look on how Layer Magic works.

The JavaScript part runs on both sides (your website and the editor).

The PHP part only runs for the editor (excepting the small initialization that transforms the shortcode into JavaScript code).

The JavaScript code is use for both the UI (user interface) and the engine logic.

The PHP code does the server-side logic. The server in this case is YOUR server.

It does require some access to read and write files (all related to Layer Magic).

As far as the project goes, it has 3 main parts:

• the engine, which includes all the logic and mathematics needed to render the visuals
• the client-side, which takes the engine and applies it directly for each Layer Magic project in your website
• the editor, which allows you to build your projects before you display them, also based on the engine 

The whole project is mainly built as a WordPress plugin, but it is designed as a standalone application.

That means that it does not conform (nor tries to) to all the WordPress practices, but only to those that make sense in this context.

Same applies for the editor's interface.

Layer Magic comes with its own designed UI and workflow and keeps it consistent along the application.

You should not expect Layer Magic to act as any other WordPress plugin.

The Mighty Editor

One of the biggest features of Layer Magic, and the one you cannot miss, is its editor.

The editor is an application in itself.

There are two ways you can view it:

• as an additional tool that facilitates building your projects, a tool that you can decide to use or not, since you can also build the projects by hand
• as the heart of Layer Magic and the face of its engine, without which there would be no Layer Magic

The way we like to view it, and the way we designed it, is the second option.

That being said, you can indeed build the projects by hand, but there would be no point in doing that, since you can as well build your whole website by hand.

Layer Magic is designed to help you create interesting projects with just a few clicks, in such way that even you yourself will be amazed by the result. 

That requires that you follow the workflow we have created and modify it to fit your needs.

All of this is important to understand if you want to fully operate Layer Magic.

File serialization and management

Layer Magic saves its user-generated data in a directory called "funkylamp_layermagic_data", found outside the plugin directory.

The files are split into projects and assets. The name of the file represents the name of the project or asset.

Project files represent individual Layer Magic projects. They are serialized as JSON and contain all the settings that involve a particular project (layers, viewport etc.).

Asset files represent individual Layer Magic assets. They are also serialized as JSON and contain data regarding the individual asset. 

The actual images or videos (PNG, JPEG etc.) are stored together with the asset files.

Layer Magic uses file's name as a unique identifier. Knowing this, you can change or recreate certain assets without needing to change the projects that include them.

The files are written in plain text, so if needed, you can change them directly by hand. 

The engine and its mathematics

The engine of Layer Magic works as module included into both the client and editor.

It is written in pure JavaScript (no additional libraries, for maximum performance).

From a code point of view, it requires some input data from the given project and it will maintain an internal state for that project.

The output of the engine is the displayed canvas itself.

It is important to know that what you do in the editor is only the manipulation of data, which will then become input for the engine.

Regarding the mathematical calculation inside the engine, it is important to know that only the known information is taken into consideration.

For example, the project file can contain additional data of any kind, which will be ignored by the engine. 

This is useful in case you want to add specific information in the files themselves, for your own reasons.

On the other hand, if any of the mandatory information is missing from the file, it will cause the engine to crash.

Website overload and performance optimizations

As any additional content added to a website will cause the website to slow down (more or less), same happens with every Layer Magic project you add.

We did our best to minimize this overhead, but removing it completely it's impossible.

You will have to keep this in mind when designing your website. 

Depending on its purpose, you will need to decide whether to trade performance for content or not.

For example, a static image will make your website faster than a Layer Magic project instead, but it will not offer the same benefits.

We took this problem very seriously when we designed Layer Magic and tried to come up with different solutions.

The placeholder feature was created to hide the loading problem of a complex project. 

If you know your project will need some time to load all its resources, set a smaller and simpler one as its placeholder. 

Once the main resources are loaded and your project is ready, it will replace its placeholder.

A placeholder project can be as simple as a static image.

This will ensure that your website will not lose its immersiveness due to loading problems.

Running a website on mobile devices causes more than layout problems. 

That system has usually fewer resources and power than the desktop, which means your website will respond at a slower pace.

Layer Magic offers you the mobile substitute feature, the option to replace your complex project with a much simpler one, when running on mobile devices.

This should allow you to build truly responsive websites. Moreover, you can also create mobile placeholders and set them to your mobile substitutes.

When it comes to performance optimizations, Layer Magic has built-in features that tries to ensure optimal running and scalability.

A few of them would be:

• projects activate and deactivate themselves when entering / leaving the screen, so you can add as many as you wish without having to worry about them.
• large images usually cause increased slowdown, so the system has to trade their quality in order to maintain optimal smoothness (we shoot for 30-45 fps on average)
• code optimization and more