diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index ef170c0..de87e3d8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,7 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="5fdc7eba-e891-48d9-9e96-66b70da1fd03" name="Default Changelist" comment="" />
+    <list default="true" id="5fdc7eba-e891-48d9-9e96-66b70da1fd03" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/lib/content_target.dart" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/lib/target_focus.dart" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/lib/target_position.dart" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/lib/tutorial_coach_mark_widget.dart" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lib/tutorial_coach_mark.dart" beforeDir="false" afterPath="$PROJECT_DIR$/lib/tutorial_coach_mark.dart" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/test/tutorial_coach_mark_test.dart" beforeDir="false" afterPath="$PROJECT_DIR$/test/tutorial_coach_mark_test.dart" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/tutorial_coach_mark.iml" beforeDir="false" afterPath="$PROJECT_DIR$/tutorial_coach_mark.iml" afterDir="false" />
+    </list>
     <ignored path="$PROJECT_DIR$/.dart_tool/" />
     <ignored path="$PROJECT_DIR$/.idea/" />
     <ignored path="$PROJECT_DIR$/.pub/" />
@@ -13,7 +22,70 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="FileEditorManager">
-    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300" />
+    <leaf>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/lib/main.dart">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="150">
+              <caret line="125" column="28" lean-forward="true" selection-start-line="125" selection-start-column="28" selection-end-line="125" selection-end-column="28" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/lib/tutorial_coach_mark.dart">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="150">
+              <caret line="10" column="22" selection-start-line="10" selection-start-column="22" selection-end-line="10" selection-end-column="22" />
+              <folding>
+                <element signature="e#29#68#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/lib/animeted_focus_light.dart">
+          <provider selected="true" editor-type-id="text-editor" />
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/lib/tutorial_coach_mark_widget.dart">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="75">
+              <caret line="5" column="28" selection-start-line="5" selection-start-column="28" selection-end-line="5" selection-end-column="28" />
+              <folding>
+                <element signature="e#0#39#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="Dart File" />
+      </list>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="IdeDocumentHistory">
+    <option name="CHANGED_PATHS">
+      <list>
+        <option value="$PROJECT_DIR$/lib/tutorial_coach_mark.dart" />
+        <option value="$PROJECT_DIR$/test/tutorial_coach_mark_test.dart" />
+        <option value="$PROJECT_DIR$/lib/ContentTarget.dart" />
+        <option value="$PROJECT_DIR$/lib/TargetPosition.dart" />
+        <option value="$PROJECT_DIR$/lib/TargetFocus.dart" />
+        <option value="$PROJECT_DIR$/lib/main.dart" />
+        <option value="$PROJECT_DIR$/lib/TutorialCoachMarkWidget.dart" />
+        <option value="$PROJECT_DIR$/lib/animeted_focus_light.dart" />
+      </list>
+    </option>
   </component>
   <component name="ProjectFrameBounds" extendedState="6">
     <option name="width" value="1078" />
@@ -25,6 +97,7 @@
     </navigator>
     <panes>
       <pane id="Scope" />
+      <pane id="PackagesPane" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
@@ -32,11 +105,20 @@
               <item name="tutorial_coach_mark" type="b2602c69:ProjectViewProjectNode" />
               <item name="tutorial_coach_mark" type="462c0819:PsiDirectoryNode" />
             </path>
+            <path>
+              <item name="tutorial_coach_mark" type="b2602c69:ProjectViewProjectNode" />
+              <item name="tutorial_coach_mark" type="462c0819:PsiDirectoryNode" />
+              <item name="lib" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="tutorial_coach_mark" type="b2602c69:ProjectViewProjectNode" />
+              <item name="tutorial_coach_mark" type="462c0819:PsiDirectoryNode" />
+              <item name="test" type="462c0819:PsiDirectoryNode" />
+            </path>
           </expand>
           <select />
         </subPane>
       </pane>
-      <pane id="PackagesPane" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -81,44 +163,98 @@
     <servers />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="0" width="1440" height="860" extended-state="6" />
+    <frame x="-1" y="0" width="1368" height="769" extended-state="6" />
     <layout>
-      <window_info id="Structure" side_tool="true" />
-      <window_info id="Image Layers" />
-      <window_info id="Designer" />
-      <window_info id="Resources Explorer" />
-      <window_info id="Capture Tool" />
-      <window_info id="Favorites" side_tool="true" />
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25395682" />
-      <window_info anchor="bottom" id="Dart Analysis" visible="true" weight="0.3292011" />
-      <window_info anchor="bottom" id="Version Control" />
-      <window_info anchor="bottom" id="TODO" />
-      <window_info anchor="bottom" id="Run" />
-      <window_info anchor="bottom" id="Debug" />
-      <window_info anchor="bottom" id="Terminal" />
-      <window_info anchor="bottom" id="Event Log" side_tool="true" />
-      <window_info anchor="bottom" id="Flutter Performance" side_tool="true" />
-      <window_info anchor="right" id="Capture Analysis" />
-      <window_info anchor="right" id="Theme Preview" />
-      <window_info anchor="right" id="Flutter Inspector" />
-      <window_info anchor="right" id="Flutter Outline" />
-      <window_info anchor="right" id="Palette&#9;" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25833333" />
+      <window_info id="Structure" order="1" side_tool="true" />
+      <window_info id="Image Layers" order="2" />
+      <window_info id="Designer" order="3" />
+      <window_info id="Resources Explorer" order="4" />
+      <window_info id="Capture Tool" order="5" />
+      <window_info id="Favorites" order="6" side_tool="true" />
+      <window_info anchor="bottom" id="Messages" visible="true" weight="0.32866043" />
+      <window_info anchor="bottom" id="Dart Analysis" order="0" weight="0.3281493" />
+      <window_info anchor="bottom" id="Run" order="1" />
+      <window_info anchor="bottom" id="TODO" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" />
+      <window_info anchor="bottom" id="Terminal" order="4" />
+      <window_info anchor="bottom" id="Event Log" order="5" side_tool="true" />
+      <window_info anchor="bottom" id="Flutter Performance" order="6" side_tool="true" />
+      <window_info anchor="bottom" id="Version Control" order="7" />
+      <window_info anchor="right" id="Capture Analysis" order="0" />
+      <window_info anchor="right" id="Theme Preview" order="1" />
+      <window_info anchor="right" id="Flutter Inspector" order="2" />
+      <window_info anchor="right" id="Flutter Outline" order="3" />
+      <window_info anchor="right" id="Palette&#9;" order="4" />
     </layout>
   </component>
   <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/pubspec.yaml">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/test/tutorial_coach_mark_test.dart">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="60">
+          <caret line="4" column="13" selection-start-line="4" selection-start-column="13" selection-end-line="4" selection-end-column="13" />
+          <folding>
+            <element signature="e#0#48#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lib/content_target.dart">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="195">
+          <caret line="13" column="12" lean-forward="true" selection-start-line="13" selection-start-column="12" selection-end-line="13" selection-end-column="12" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lib/target_focus.dart">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="120">
+          <caret line="8" column="14" selection-start-line="8" selection-start-column="14" selection-end-line="8" selection-end-column="14" />
+          <folding>
+            <element signature="e#0#38#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lib/target_position.dart">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="75">
+          <caret line="5" column="13" selection-start-line="5" selection-start-column="13" selection-end-line="5" selection-end-column="13" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lib/tutorial_coach_mark_widget.dart">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="75">
+          <caret line="5" column="28" selection-start-line="5" selection-start-column="28" selection-end-line="5" selection-end-column="28" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/lib/main.dart">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="270">
-          <caret line="17" column="32" lean-forward="true" selection-start-line="17" selection-start-column="32" selection-end-line="17" selection-end-column="32" />
+        <state relative-caret-position="150">
+          <caret line="125" column="28" lean-forward="true" selection-start-line="125" selection-start-column="28" selection-end-line="125" selection-end-column="28" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/lib/tutorial_coach_mark.dart">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="126">
-          <caret line="7" lean-forward="true" selection-start-line="7" selection-end-line="7" />
+        <state relative-caret-position="150">
+          <caret line="10" column="22" selection-start-line="10" selection-start-column="22" selection-end-line="10" selection-end-column="22" />
+          <folding>
+            <element signature="e#29#68#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/lib/animeted_focus_light.dart">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
   </component>
 </project>
\ No newline at end of file
diff --git a/lib/animeted_focus_light.dart b/lib/animeted_focus_light.dart
new file mode 100644
index 0000000..c590e23
--- /dev/null
+++ b/lib/animeted_focus_light.dart
@@ -0,0 +1,14 @@
+
+import 'package:flutter/widgets.dart';
+
+class AnimetedFocusLight extends StatefulWidget {
+  @override
+  _AnimetedFocusLightState createState() => _AnimetedFocusLightState();
+}
+
+class _AnimetedFocusLightState extends State<AnimetedFocusLight> {
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}
diff --git a/lib/content_target.dart b/lib/content_target.dart
new file mode 100644
index 0000000..e403569
--- /dev/null
+++ b/lib/content_target.dart
@@ -0,0 +1,17 @@
+
+import 'package:flutter/widgets.dart';
+
+enum AlignContent{
+  top,
+  bottom,
+  left,
+  right
+}
+
+class ContentTarget{
+
+  final AlignContent align;
+  final Widget child;
+
+  ContentTarget({this.align = AlignContent.bottom, this.child}):assert(child != null);
+}
\ No newline at end of file
diff --git a/lib/light_paint.dart b/lib/light_paint.dart
new file mode 100644
index 0000000..9a0f6d5
--- /dev/null
+++ b/lib/light_paint.dart
@@ -0,0 +1,43 @@
+ import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+class LightPaint extends CustomPainter {
+
+  final double progress;
+  final Offset positioned;
+  final double sizeCircle;
+
+  Paint _paintFocus;
+
+  LightPaint(this.progress, this.positioned, this.sizeCircle){
+    _paintFocus = Paint()
+      ..color = Colors.transparent
+      ..blendMode = BlendMode.clear;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+
+    canvas.saveLayer(Offset.zero & size, Paint());
+    canvas.drawColor(Colors.black.withOpacity(0.8), BlendMode.dstATop);
+
+    double sizeFocus = (size.height * 1.4) * (1-progress) + sizeCircle;
+    double radius  = min(sizeFocus,sizeFocus);
+
+    canvas.drawCircle(
+        positioned,
+        radius,
+        _paintFocus
+    );
+    canvas.restore();
+
+  }
+
+  @override
+  bool shouldRepaint(LightPaint oldDelegate) {
+    return oldDelegate.progress != progress;
+  }
+
+ }
\ No newline at end of file
diff --git a/lib/target_focus.dart b/lib/target_focus.dart
new file mode 100644
index 0000000..36c1d1e
--- /dev/null
+++ b/lib/target_focus.dart
@@ -0,0 +1,13 @@
+import 'package:flutter/widgets.dart';
+import 'package:tutorial_coach_mark/content_target.dart';
+import 'package:tutorial_coach_mark/target_position.dart';
+
+class TargetFocus{
+
+  final GlobalKey keyTarget;
+  final TargetPosition targetPosition;
+  final List<ContentTarget> contents;
+
+  TargetFocus({this.keyTarget, this.targetPosition, this.contents}):assert(keyTarget != null || targetPosition != null);
+
+}
\ No newline at end of file
diff --git a/lib/target_position.dart b/lib/target_position.dart
new file mode 100644
index 0000000..d7e75b3
--- /dev/null
+++ b/lib/target_position.dart
@@ -0,0 +1,9 @@
+
+import 'dart:ui';
+
+class TargetPosition{
+  final Size size;
+  final Offset offset;
+
+  TargetPosition(this.size, this.offset);
+}
\ No newline at end of file
diff --git a/lib/tutorial_coach_mark.dart b/lib/tutorial_coach_mark.dart
index 80285b2..694cdd4 100644
--- a/lib/tutorial_coach_mark.dart
+++ b/lib/tutorial_coach_mark.dart
@@ -1,7 +1,30 @@
 library tutorial_coach_mark;
+import 'package:flutter/material.dart';
+import 'package:tutorial_coach_mark/tutorial_coach_mark_widget.dart';
 
-/// A Calculator.
-class Calculator {
-  /// Returns [value] plus 1.
-  int addOne(int value) => value + 1;
+class TutorialCoachMark {
+  final BuildContext _context;
+
+  OverlayEntry _overlayEntry;
+
+  TutorialCoachMark(
+      this._context,);
+
+  OverlayEntry _buildOverlay() {
+    return OverlayEntry(builder: (context) {
+      return TutorialCoachMarkWidget();
+    });
+  }
+
+  void show() {
+    if (_overlayEntry == null) {
+      _overlayEntry = _buildOverlay();
+      Overlay.of(_context).insert(_overlayEntry);
+    }
+  }
+
+  void _hide() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+  }
 }
diff --git a/lib/tutorial_coach_mark_widget.dart b/lib/tutorial_coach_mark_widget.dart
new file mode 100644
index 0000000..3774a0d
--- /dev/null
+++ b/lib/tutorial_coach_mark_widget.dart
@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:tutorial_coach_mark/target_focus.dart';
+
+class TutorialCoachMarkWidget extends StatefulWidget {
+
+  final List<TargetFocus> targets;
+
+  const TutorialCoachMarkWidget({Key key, this.targets}) : super(key: key);
+
+  @override
+  _TutorialCoachMarkWidgetState createState() => _TutorialCoachMarkWidgetState();
+}
+
+class _TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}
diff --git a/test/tutorial_coach_mark_test.dart b/test/tutorial_coach_mark_test.dart
index e020d97..34ec5e3 100644
--- a/test/tutorial_coach_mark_test.dart
+++ b/test/tutorial_coach_mark_test.dart
@@ -3,11 +3,4 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';
 
 void main() {
-  test('adds one to input values', () {
-    final calculator = Calculator();
-    expect(calculator.addOne(2), 3);
-    expect(calculator.addOne(-7), -6);
-    expect(calculator.addOne(0), 1);
-    expect(() => calculator.addOne(null), throwsNoSuchMethodError);
-  });
 }
diff --git a/tutorial_coach_mark.iml b/tutorial_coach_mark.iml
index 28de00e..3843a3a 100644
--- a/tutorial_coach_mark.iml
+++ b/tutorial_coach_mark.iml
@@ -9,14 +9,17 @@
       <excludeFolder url="file://$MODULE_DIR$/.idea" />
       <excludeFolder url="file://$MODULE_DIR$/.pub" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
+      <excludeFolder url="file://$MODULE_DIR$/example/.dart_tool" />
+      <excludeFolder url="file://$MODULE_DIR$/example/.pub" />
+      <excludeFolder url="file://$MODULE_DIR$/example/build" />
       <excludeFolder url="file://$MODULE_DIR$/example/tutorial_coach_mark_demo/.dart_tool" />
       <excludeFolder url="file://$MODULE_DIR$/example/tutorial_coach_mark_demo/.pub" />
       <excludeFolder url="file://$MODULE_DIR$/example/tutorial_coach_mark_demo/build" />
     </content>
     <orderEntry type="jdk" jdkName="Android API 25 Platform" jdkType="Android SDK" />
     <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="Dart Packages" level="project" />
     <orderEntry type="library" name="Dart SDK" level="project" />
     <orderEntry type="library" name="Flutter Plugins" level="project" />
+    <orderEntry type="library" name="Dart Packages" level="project" />
   </component>
 </module>
\ No newline at end of file